Options for Styling React Apps

Importing external stylesheets

Pros

• Any front-end dev knows how to use it

• Full CSS features (pseudo-classes, pseudo-elements, animations, custom properties, etc.)

• Smaller css files (one per component) makes it easy to manage

Cons

• Globally-scoped styles can cause specificity issues, style clashes, etc.

Inline styles

Pros

• Access to Component's props

• Styles are scoped locally to the component

• Locality of Behaviour

Cons

• Some CSS features are unavailable (pseudo-classes, pseudo-elements, animations, custom properties, etc.)

• CSS to JS syntax translation mental overhead

• Just use styled-components if you like the LoB

• No browser cache

CSS Modules

Pros

• All the pros from external stylesheets

• Styles are scoped locally to the component

• Can import/export common styles between files

Cons

• Must be applied with bracket notation if class names are hyphenated

• No access to props

• Non-standard syntax for creating global styles

styled-components

Pros

• Access to Component's props

• Styles are scoped locally to the component

• Locality of Behaviour

Cons

• No browser cache

• Can't integrate with SASS/SCSS, PostCSS, stylelint, etc.

UI Component Libraries

Pros

• Pre-styled components

• a11y out of the box

• Cross-browser compatibility

Cons

• Verbose

• Samey look and feel if not customised

• Can be hard to override or customise

• Larger bundle size