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
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
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
Last updated