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: styled-components.com ... it's so superior to VUE scoped css — Joao Polo
– Joao Polo, Commented May 28, 2019 at 23:06
Have you tried Svelte? ... It has it built in ... and is much more performant than React :) — pesho hristov
– pesho hristov, Commented Nov 23, 2021 at 18:46

Даниил Пронин · Accepted Answer · 2019-10-28 11:20:04Z

17

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] {}

answered Oct 28, 2019 at 11:20

Даниил Пронин

1,31418 silver badges36 bronze badges

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

Comments

Gal Margalit · Accepted Answer · 2019-05-27 13:45:47Z

9

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>

answered May 27, 2019 at 13:45

Gal Margalit

5,8646 gold badges57 silver badges60 bronze badges

Comments

dungmidside · Accepted Answer · 2018-06-14 04:21:47Z

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, 2018 at 4:21

dungmidside

5188 silver badges20 bronze badges

3 Comments

Maria Over a year ago

but 1. won't be scoped, it'll affect all other components

dungmidside Over a year ago

I found your question deplicated here. More infor about scope CSS in React link

meganaut Over a year ago

For styled-components see: styled-components

whoismuktar · Accepted Answer · 2021-07-06 11:09:28Z

1

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;

answered Jul 6, 2021 at 11:09

whoismuktar

3513 silver badges6 bronze badges

Comments

kingdaro · Accepted Answer · 2018-06-14 03:20:15Z

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, 2018 at 3:20

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

3 Comments

Maria Over a year ago

Why isn't it possible in React?

kingdaro Over a year ago

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

Rene Rowell de la Rama Over a year ago

I think people will be looking for this feature if they have Vue experience. I did Vue and React. And if scoped styling feature of Vue is available in react it will remove verbose JS className code in components. From className={`text-3xl mt-4 ${styles.yo}`} to className="text-3xl mt-4 yo"

Sarah Groß · Accepted Answer · 2019-11-11 13:25:07Z

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>

Collectives™ on Stack Overflow

How to add scoped css in react?

6 Answers 6

Comments

Comments

3 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related