React CSS - how to apply CSS to specific pages only

Question

I am using create-react-app and I am trying to work out an "efficient" way to apply stylesheets to specific pages.

My src folder structure looks something like this:

| pages
| - About
| - - index.js
| - - styles.css
| - Home
| - - index.js
| - - styles.css
| index.js
| index.css

In each of the index.js files I use import './style.css'

However, I'm finding that when I navigate from one page to the next the styles from the starting page are being applied to the target page as if they're being cached and the styles from the target page are not being followed.

I just wondered if I'm misunderstanding how to apply styles in React to specific pages. Should I be making entirely self contained components which incude the styles too?

I am considering applying them inline but I realise there are limitation when using JS styles.

Answer 1

Create react app will bundle all your css files into one so all the styles will be available everywhere in you app (on every rendered component). Be aware that CRA is a Single-Page Application (SPA) so you can't think in "pages" but rather in "rendered component" in the DOM.

You have multiple solutions:

1- Be organized in you css files : prefix all your classes by your component name to avoid conflict (like BEM) or use css hierachy .my-component > .my-class {...}

<div className="my-component">
   <span className="my-class">Hello</span>
</div>

2- declare all your style in your JSX files:

const styles= {
  myComponent: {
    fontSize: 200,
  },
};
const myComponent = () => (
  <span style={styles.myComponent}>Hello</span>
);

the downside is that your styles will not be vendor prefixed by default.

3- Eject or use a fork of react-scripts (the engine of CRA) to use CSSModules (https://github.com/css-modules/css-modules)

Answer 2

Because React is mostly used to create Single Page Applications (SPA) and the intention by this design is to not reload the entire page over and over again. So the stylesheets won't also be reloaded.

If you are using React with a bundler like Webpack then all stylesheets get bundled together. The same applies to all React components. So you get bundled JS and bundled CSS.

Why do you might want to separate stylesheets?

1. The bundled CSS file becomes smaller.
2. You can have duplicated stylesheets names, but a different setup of the attributes.

The first point is okay. The second point is not a good design because you'll create confusing stylesheet rules and it won't make use of the general part of stylesheets - cascading.

I'd recommend to stick with the bundled approach, even if the CSS files becomes a bit bigger than necessary for the currently rendered page.

In my option, React components should not depend on any stylesheets. Just implement a component, make it work independently (except the child components) and then use them in different application with different stylesheets.

Even, don't use inline stylesheets for your components because this will blow up your actual React component, especially when these inline styles won't be used because of the bundled stylesheets that are available in the entire application.