Options to do CSS in React

  • Suit CSS, BEM et al.: separate, regular stylesheets but component naming convention for components.
  • Just manually with inline style attributes. To merge multiple style maps, use helpers like react-style, which enables an array syntax for the style attribute, use a custom function like m() to do the same, or use destructuring: style={ {...a, ....b, ...c} }.
  • Radium supports a [] syntax like react-style, but also adds support for things like :hover and media queries at the expense of wrapping the component.
  • CSS Modules is a CSS-like syntax that gets parsed into a dict of class names, and the CSS extracted into a file.

Further reading:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s