How to add scoped css in react?

Question

Is there a React equivalent of scoped css as in Vue that's super easy to work with, without a bunch of re-writes? One which I can just import an existing css file, and hook it up to a component, and it just works?

In Vue, it's as easy as

<style scoped src="./boxes.css"></style>

And Bam! Your css is now scoped to your component.

Is there anything similar in React? Something like

// import the css file
import styles from "./boxes.css";

// hook it to a component, or using any other methods
@inject(styles)
class Boxes extends Component {
  render(){
    <div className='container'>
       /* must support multiple classes out-of-the-box, unlike CSSModule where you have to 
       re-write into a super long array like className={[styles.box, styles.green, styles.large]} */
      <div className='box green large'></div> 
      <div className='box red small'></div> 
    </div>
  }
}

you need that: https://www.styled-components.com/ ... it's so superior to VUE scoped css — Joao Polo, May 28 '19 at 23:06
Have you tried Svelte? ... It has it built in ... and is much more performant than React :) — pesho hristov, Nov 23 '21 at 18:46

score 16 · Answer 1 · answered Oct 28 '19 at 11:20

Every answer here is about CSS Modules, but scoped styles in Vue works another way.

Here the library for React that works like <style scoped> in Vue: https://github.com/gaoxiaoliangz/react-scoped-css

Input:

import React from 'react'
import './Title.scoped.css'

const Title = props => {
  return (
    <h1 className="title">
      <p>{props.children}</p>
    </h1>
  )
}

export default Title

Output:

<h1 class="title" data-v-hi7yyhx>

.title[data-v-hi7yyhx] {}

score 9 · Answer 2 · answered May 27 '19 at 13:45

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

Result: No clashes from other .error class names

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

score 1 · Answer 3 · answered Jun 14 '18 at 04:21

1

There's nothing like that in React. 3 common ways to style:

Import a css file then use className like normal HTML => nothing have to learn, just add an import and you ready to go.
Css-in-js libraries. I prefer styled-component - it's awesome.
Inline style

answered Jun 14 '18 at 04:21

dungmidside

508
7
19

5

but 1. won't be scoped, it'll affect all other components – Maria Jun 14 '18 at 04:33
I found your question deplicated [here](https://stackoverflow.com/questions/47090574/how-to-make-react-css-import-component-scoped). More infor about scope CSS in React [link](https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e) – dungmidside Jun 14 '18 at 04:38
For styled-components see: [styled-components](https://www.styled-components.com/) – meganaut Jun 14 '18 at 06:36

score 0 · Answer 4 · answered Jun 14 '18 at 03:20

0

As far as I know, there's no way to do it exactly the way Vue does it, but there are plenty of libraries for doing this kind of thing, which gives you lots of choice for however you prefer to work. My personal recommendation is emotion.

answered Jun 14 '18 at 03:20

kingdaro

11,528
3
34
38

2

Why isn't it possible in React? – Maria Jun 14 '18 at 04:00
It's _probably_ possible with React, but no one's really had a real need for it. The current solutions for styling have been satisfactory for the most part – kingdaro Jun 14 '18 at 05:25

score 0 · Answer 5 · edited Nov 11 '19 at 13:25

You can use css modules with the webpack css-loader.

It will scope your css by adding a unique hash in the name of your css classes.

For exemple if you have a ComponentA with a style definition in a file named stylesA.css and a ComponentB with a style definition in a file named stylesB.css like:

import * as React from 'react'

const stylesA = require('./stylesA.css')
const stylesB = require('./stylesB.css')

class ComponentA extends React.Component {
  render <div className={stylesA.container}>
}

class ComponentB extends React.Component {
  render <div className={stylesB.container}>
}

class Main extends React.Component {
  render <div>
    <ComponentA />
    <ComponentB />
  </div>
}

your HTML file will result as

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div id="app">
      <div class="container-[HASH FOR A]">
      </div>
      <div class="container-[DIFFERENT HASH FOR B]">
      </div>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

score 0 · Answer 6 · answered Jul 06 '21 at 11:09

For anyone that stumbles upon this...

Coming from Vue, I faced this issue as well. I was able to device a flexible scoped styling structure for each component

Consider the below.

const useOwnStyles = () => ({
    hero: {
        backgroundColor: "red",
        height: "300px",
    },
    // add more classes
});

const Home = () => {
    const classes = useOwnStyles();
    return (
        <div style={classes.hero}>
           <div>My Section</div>
        </div>
    );
}
 
export default Home;

How to add scoped css in react?

6 Answers6

Linked