How to load different .css files on different components of a react application?

Question

I have two .jsx files that represent their respective components.

The first one is, Blog.jsx

import React from "react";
import '../assets/css/blog.css';

export const Blog = () => (
    <div>
        <h1>Hello Blog</h1>
    </div>
)

With its respective CSS file, blog.css

div { background: #ff481f; }

and the second one is, Landing.jsx

import React from "react";
import '../assets/css/landing.css'

export const Landing = () => (
    <div>
        <h1>Hello Landing</h1>
    </div>
)

With its respective CSS file, landing.css

div { background: #86ff2b; }

I have added routing and called instances of those two components on the App.js file which is the default file of a React application. After running the application, when navigated to components, I faced a problem that the background color is the same for both of the components (It loads landing.css only and never changes).

How can I fix that problem that each component only uses its respective .css file and loads it?

Answer 1

By default webpack and other build tools will compile all CSS files into one, even if css was imported in separate JSX files. So you can't use different CSS files and expect you don't affect on another part of page.

You have some options:

1. Use BEM for naming class names.

2. Use cssModules. In this case elements will have their own css class name and styles will not affect any other elements except if you use :global selector.

   • css-module

Answer 2

Using html tags as css selectors is a bad practice (because there is the behaviour you describe).

You should use only css classes or inline styles (using id's is another bad practise, id's have high priority).

div {
  width: 20px;
  height: 20px;
}

#id {
  background: red;
}

.class {
  background: green;
}

<div id="id" class="class"></div>

In case using css classes there is the same problem (when you have two similar classes). And this case is decided using css modules (set of rules of building) or you can use css-in-js (external library) which has its pros and cons. Also you can use BEM (methodology) and if your application is not big you can avoid this trouble.

css modules will add to your classes random hash and instead .my-awesome-class-name you will get .my-awesome-class-name-dew3sadf32s.

So, if you have two classes .class in the first file and .class in the second file in the end you will get two classes .class-dew23s2 and .class-dg22sf and you styles will resolve as expected.

css-in-js is a similar way except you should write your styles using javascript with some profits like including only those styles that are needed at the moment (what you are looking for right now) and several others.

You can code using pure css / scss / postcss / etc but many companies already choose between css modules and css-in-js.

BEM is just naming conventions for your class names.

And lastly - if you use inline-styles using react you should remember:

{} is constructor of object and {} returns new object on every call, it's mean if you write something like:

class MyAwesomeComponent extends Component {
  render() {
    return <div style={{color: "red"}}></div>;
  }
}

or

class MyAwesomeComponent extends Component {
  render() {
    const divStyles = {color: "red"};

    return <div style={divStyles}></div>;
  }
}

div will re-render every time your render will call because div takes new prop.

Instead, you should define your styles (for example) in outside of your class:

const divStyles = {color: "red"};

class MyAwesomeComponent extends Component {
  render() {
    return <div style={divStyles}></div>;
  }
}