How to avoid CSS conflicts in ReactJs

Question

I am not at all an expert in react, but from what I could see if I import some css sheets these will be for all my application. If I wanted to use react for a multi-page app how do I define css sheets for each page?

My file structure

Page 1

import React, { Component } from "react";
import "./style.css";

export default class Page1 extends Component {
  render() {
    return (
      <div>
        <button>with css</button>
      </div>
    );
  }
}

Page 2

import React, { Component } from "react";

export default class Page2 extends Component {
  render() {
    return (
      <div>
        <button>no css</button>
      </div>
    );
  }
}

style.css

button {
  background: green;
}

This style should only be applied to the first page but it is also applied to page 2. How can I solve this?

you are using webpack? anyway, import the css file only in the component child no in the root — Black Hole, Mar 20 '19 at 17:34
^The problem still persists, as stated by OP, because each style imported in any component is globally available and applies to the whole app (as the css is appended). — Jibin Joseph, Mar 20 '19 at 17:37
Can you show how you're importing them? Are you just including them in your index.html? Are you using a bundler? (if so, which one?) etc. — Mike 'Pomax' Kamermans, Mar 20 '19 at 17:41
Possible duplicate of [How to make React CSS import component-scoped?](https://stackoverflow.com/questions/47090574/how-to-make-react-css-import-component-scoped) — Nino Filiu, Mar 20 '19 at 17:42
Also check [this article on modular CSS](https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e) and [this issue on scoped CSS](https://github.com/facebook/create-react-app/issues/4608) — Nino Filiu, Mar 20 '19 at 17:44

gianlop3z · Answer 1 · 2020-10-02T19:31:22.313

6

The easiest way to avoid css conflicts beetwen pages on Reactjs is to use css-modules (it's not a dependency), just change your page stylesheet name from 'my-stylesheet.css' to 'my-stylesheet.module.css' and import it as 'my-stylesheet.module.css'.

edited Oct 02 '20 at 19:31

answered Oct 02 '20 at 19:13

gianlop3z

107
2
9

score 4 · Accepted Answer · edited Apr 30 '22 at 14:38

There are two different ways of doing this, by using:

CSS modules
CSS in JS

This short article compares the two. I prefer CSS modules.

How to use CSS modules?

Setup

Let's say your CSS file is named styles.css to make it a module you will need to change it to styles.module.css
Import the CSS file like so import styles from './styles.module.css' (you can use any other name instead of styles)

Naming

<div className={styles.box_one}>
   some content
</div>

Important: make sure the class in your CSS file is named .box_one and not .box-one

My personal preference

I would import like so import s from './styles.module.css' using s instead of styles just to make the code cleaner.

My JSX would look like below

<div className={s.box_one}>
   some content
</div>

score 2 · Answer 3 · answered Mar 20 '19 at 17:39

Here's a random react app:

What i do is i create CSS files for my containers (pages) and i import then within:

import './styleForComponent.css'

Style applies to child component and doesnt intefere with my other pages, if you want some global style you can import then in index.html as you would without React or import your css in your index.js

score 2 · Answer 4 · answered Mar 20 '19 at 17:40

if you are import to the top level of component for example:

import ReactDOM from "react-dom";
import "./yourCSS.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Then in all children components will be visible.

score 1 · Answer 5 · answered Mar 20 '19 at 18:12

You can check for styled components or react-jss. These will help to bind the styles specific to that component.The styles wont conflict with other components

A sample react-jss piece of code looks like this

import injectSheet from 'react-jss'
var styles = {
  button : {
   //styles here
  }
}


const Button = ({ classes}) => (
  <button className={classes.myButton}>
      Hello
    </button>
)

const StyledButton = injectSheet(styles)(Button)
//render it
 <StyledButton></StyledButton>

https://www.npmjs.com/package/react-jss

score 1 · Answer 6 · answered Feb 12 '20 at 09:30

You can use module.css or Styled Components to avoid this error Instead of using "./style.css" make a file named "./style.module.css" this will limit the styles to only your component Example of usage -

import React, { Component } from "react";
import styles from "./styles/FlexDemo.module.css";
export default class FlexDemo extends Component {
    render() {
        return (
            <div className={styles.container}>
                <div className={styles.subContainer}>
                    <img
                        src="https://source.unsplash.com/random"
                        width="40%"></img>
                    <div className={styles.subText}>
                        <h1>Flex Box Demo</h1>
                        <p>
                            Aliquip ea culpa dolore ut culpa culpa incididunt
                            minim culpa qui elit veniam ut. Excepteur irure
                            voluptate amet nisi excepteur non dolore ipsum id
                            dolor proident mollit nostrud nulla. Duis proident
                            voluptate quis sit excepteur ut qui mollit. Anim
                            ullamco nostrud proident amet nulla ut est deserunt
                            cillum. Ea ex nostrud occaecat consectetur et.
                        </p>
                    </div>
                </div>
            </div>
);
}}

Here is the css file css file image

score -2 · Answer 7 · answered Feb 12 '20 at 09:41

-2

All you need is to import the styles for the whole app as follow:

import ReactDOM from "react-dom";
 import "./TheWholeAppStyle.css"; 
import App from "./App"; ReactDOM.render(<App />,document.getElementById("root"));

answered Feb 12 '20 at 09:41

mohamed ibrahim

567
4
12

How to avoid CSS conflicts in ReactJs

My file structure

Page 1

Page 2

style.css

7 Answers7