How to make React CSS import component-scoped?

Question

I have several components which have the following CSS/component structure

About/style.css

.AboutContainer {
    # Some style
}

p >          


        

Answer 1

Because you mentioned you used create-react-app, the solution here is quite easy change just style.css to style.module.css, it will look like this:

import styles from "./style.css"
<button className={styles.button}>blabla</button>

More info on this article: https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e

Answer 2

Maybe react-scoped-css will help. Btw, I'm the author of this lib, if you find anything broken or simply want to improve it, you can always raise an issue or send a pr.

Answer 3

You can use SASS (.scss) to imitate scoped CSS.

Say you need to use bootstrap in only one component (to avoid conflicts). Wrap the component in <div className='use-bootstrap'> and then created a .scss file like so:

.use-bootstrap {   
  // Paste bootstrap.min.css here
}

Answer 4

It sounds like CSS Modules, or many of the other CSS-in-JS packages, does what you want. Others include Emotion (my current favorite), Styled Components, or many of the packages here.

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).

Here's a quick example:

Let's say we have a React component like:

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

and some CSS in ./styles/button.css of:

.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

After CSS Modules performs it's magic the generated CSS will be something like:

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

where the _3DjDE is a randomly generated hash - giving the CSS class a unique name.

An Alternative

A simpler alternative would be to avoid using generic selectors (like p, code, etc) and adopt a class-based naming convention for components and elements. Even a convention like BEM would help in preventing the conflicts you're encountering.

Applying this to your example, you might go with:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

Essentially all elements you need to style would receive a unique classname.