How to import css file as local scoped in ReactJS?

Question

How can I import stylesheet locally for single view.

I am having two views /home and /blog and the following directory of files:

src
│  
└───components       
      │
      └───Home
      │     Home.js
      │     Home.css
      └───Blog
            Blog.js
            Blog.css

I have a seperate css file home.css for home view only but that style is getting applied to blog view also.

I want the home.css file to work only with the home.js view.

Home.css

.text1 {
   font-size: 1em !important;
   font-family: "Noto Sans", sans-serif !important;
   color: red;
 }

Home.js

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

class Home extends Component {
  render() {
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1>This must be red.</h1>
        <a href="/blog">Go to Blog</a>
      </div>
    );
  }
}

export default Home;

Blog.js

import React, { Component } from "react";
import "./blog.css";   //I didn't Import Home.css here and blog.css is and empty css file.

class Blog extends Component {
  render() {
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1>This must be black.</h1>
        <a href="/">Go to Home</a>
      </div>
    );
  }
}

export default Blog;

Here is the React App:

https://codesandbox.io/s/github/AzizStark/ReactStyleIssue/tree/master/?fontsize=14&hidenavigation=1&theme=dark

this is happening because of the same className being used in both blog and home. Whichever stylesheet get appends last will have the most effect. Either use different className or use id instead. — remelkabir
– remelkabir, Commented Dec 26, 2019 at 16:25

Babak Yaghoobi · Accepted Answer · 2019-12-26 16:19:47Z

10

for locally scope don't use import, use require :

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

class Home extends Component {
  render() {
    require("./home.css"); // here
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1 class="red">This must be red.</h1>
        <a href="/blog">Go to Blog</a>
      </div>
    );
  }
}

export default Home;

answered Dec 26, 2019 at 16:19

Babak Yaghoobi

1,99510 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

n212 Over a year ago

Surprising this isn't said often, even though this is the easiest and best fix.

wentjun · Accepted Answer · 2019-12-26 16:24:12Z

4

You cannot locally scope CSS in React with pure/vanilla CSS.

In order to achieve locally scoped CSS,

you will have to make use of

1) CSS modules,

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

class Blog extends Component {
  render() {
    return (
      <div className="text1" style={styles.blackDiv}>
        <h1>This must be black.</h1>
        <a href="/">Go to Home</a>
      </div>
    );
  }
}

export default Blog;

2) CSS-in-JS/JSS (using libraries such as styled-components).

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`



render(
   <Button /> 
);

3) Using SASS/SCSS (by nesting the selectors/classes within a parent class)

// blog.scss

.blackDiv {
  >h1 {
    // css properties
  }
  > a {
     // css properties
  }
}

edited Dec 26, 2019 at 16:24

answered Dec 26, 2019 at 16:12

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

4 Comments

AzizStark Over a year ago

Why I cannot locally scope css?

wentjun Over a year ago

@AzizStark that is because of how CSS works. Once CSS is imported, it will be "combined" and applied to the entire DOM.

AzizStark Over a year ago

You are right!, The CSS is combined. During the final build the css is bundled together even though I use "require()"function which only works is development environment.

Aakash Verma Over a year ago

@wentjun I thought webpack/css plugin adds some random string after the css class to keep it unique. Isn't it? I remember having same classes in different files and it still used to work in an isolated fashion.

Collectives™ on Stack Overflow

How to import css file as local scoped in ReactJS?

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related