https://github.com/hentaicracker/works
personal note book for work
https://github.com/hentaicracker/works
css-in-js es6 es7-decorators glamorous react redux typescript
Last synced: 7 months ago
JSON representation
personal note book for work
- Host: GitHub
- URL: https://github.com/hentaicracker/works
- Owner: hentaicracker
- Created: 2017-12-22T09:06:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-30T10:06:20.000Z (over 7 years ago)
- Last Synced: 2025-02-09T08:45:55.295Z (9 months ago)
- Topics: css-in-js, es6, es7-decorators, glamorous, react, redux, typescript
- Language: TypeScript
- Homepage:
- Size: 136 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# works
Create react app with TypeScript & css-in-js.
## Get Started
Init a project:
```shell
$ yarn add create-react-app -g
$ create-react-app my-app --scripts-version=react-scripts-ts
$ cd my-app
```
Adding css-in-js module:
```shell
$ yarn add glamorous glamor
```
### Adding style
Creating a style file at `./MyComponent/MyComponent-styles.tsx`.
```javascript
import { CSSProperties } from 'glamorous';
const styles = {
color: {
white: '#FFFFFF',
black: '#000000',
gray: '#EEE',
}
}
export const myComponent = (hover: Boolean) => ({
color: hover ? styles.color.black : styles.color.white,
border: `1px solid ${styles.color.gray}`,
} as CSSProperties);
```
Importing style file in your component.
```javascript
import * as React from 'react';
import glamorous from 'glamorous';
import * as styles from './MyComponent-styles';
const { Div } = glamorous;
interface Props {
}
interface State {
hovering: Boolean;
}
export class MyComponent extends React.Component {
state = {
hovering: false
};
render() {
return (
)
}
}
```
## Developing
```shell
$ yarn start
$ yarn build
```
There has a problem with glamorous, when you try to give a glamorous Button an onClick attribute with a Function as argument, a error will be display. Just look at this [issue](https://github.com/paypal/glamorous/issues/353).