react-with-styles: basic usage

react-with-styles is one of the CSS-in-JS libraries. You can modify document's style in js files and most of the times it'd be inside Component if you chose to use React. Inside of it's related to HOC(Higher-Ordered Components).

• install react-with-styles

> yarn add react-with-styles aphrodiete react-with-styles-interface-aphrodite

You should install not only install react-with-styles but also aphrodite. aphrodite helps you to render on server-side. JS Engline would start working with CSS(in js files) only after DOM drawing is finished. There're some delays to be done with CSS painting and that's when aphrodite plays a role.

• withStyles.js

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
import Theme from './Theme';

ThemedStyleSheet.registerTheme(Theme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

export { css, withStyles, withStylesPropTypes, ThemedStyleSheet };
export default withStyles;

1. register Theme and export associated modules. Theme'll be applied to Component if you wrap it with withStyles() and give style using css().

• Theme.js

export default {
  color: {
    ...
    default: '#999999',
  },
  size: {
    ...
    md: 14,
    ...
  },
  ...
};

1. Create 'Theme.js' file and export an object. The object should include property values commonly shown in the project overall.

import react, {Component} from 'React'
import withStyles, { css } from './withStyles';

class StyledComp extends Component {
    const { styles } = this.props;

    render(){
        return (<div ...css(styles.default)></div>)
    }

withStyles(({ color, size }) => ({
  default: {
    color: color.default,
    fontSize: size.md,
  },
}))(StyledComp);

1. withStyles() creates a function which takes Component as input and gives Component (with {default: ...} props) as output. Higher-Ordered Component is what takes WrappedComponent, modify its behavior(add lifecycle method, log its output, conditonally render, attach/detach eventListener and etc...) and returns modified Component.