Enhancing Styles with CSS-in-JS
- Components: you’ll style your site with components, which integrates well with React’s “everything is a component” philosophy.
- Scoped: this is a side effect of the first. Just like CSS Modules, CSS-in-JS is scoped to components by default.
- Bonuses: many CSS-in-JS libraries generate unique class names which can help with caching, automatic vendor prefixes, timely loading of critical CSS, and implementing many other features, depending on the library you choose.
Note that this functionality is not a part of React or Gatsby, and requires using any of the many third-party CSS-in-JS libraries.
Adding a stable CSS class to your JSX markup along with your CSS-in-JS can make it easier to users to include User Stylesheets for accessibility. See Styled Components example.
This section contains guides for styling your site with some of the most popular CSS-in-JS libraries, including how to set up global styles using each library.