CODEWITHSUNDEEP
reactjscreate-react-app
tommyd456
tommyd456

Reputation: 10693

React CSS - how to apply CSS to specific pages only

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.

Upvotes: 15

Views: 35409

Answers (3)

Wylie
Wylie

Reputation: 550

To do that as an external css stylesheet you will need to rename your stylesheets. Your stylesheet needs to end in ".module.css" eg "styles.module.css". CSS in such a file can only be used by the components that import them. As stated in a tutorial from W3Schools.

Let's say this is your CSS code in styles.module.css:

.container {
  color: white;
}
.cont-child {
  background-color: red;
}

Then in your JS file you can import the CSS file like this if the JS and CSS files are in the same directory. Make sure you point to the correct path.

import styles from './styles.module.css'

Then in your HTML section you can use it like this:

class Home extends React.Component {
  render() {
    return(
      <main className={ styles.container } >
        <div className={ styles["cont-child"]} >
          Some div text about something...
        </div>
      </main>
    );
  }
}

I currently use both ways to access the selectors, since the styles variable acts like an object. I placed both of them here because the second option is capable of fetching selectors named like "btn-active". Which comes in handy in some situations. Camelcasing is considered cleaner though.

Upvotes: 3

gouroujo
gouroujo

Reputation: 551

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)

Upvotes: 17

Marc
Marc

Reputation: 3070

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.

Upvotes: 3

Related Questions