'How to avoid CSS conflicts in ReactJs

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?

javascripthtmlcssreactjsfrontend


Solution 1:[1]

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'.

Solution 2:[2]

Here's a random react app:

enter image description here

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

Solution 3:[3]

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.

Solution 4:[4]

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

Solution 5:[5]

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

Solution 6:[6]

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

  1. 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
  2. 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>

Solution 7:[7]

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"));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Halt
Solution 3 Mario
Solution 4 coolguy
Solution 5 Kush Daga
Solution 6 marc_s
Solution 7 mohamed ibrahim

Related Questions