Create-react-app: Easy way to add scoped css?

[marialovesbeans]

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

[ianschmitz]

Sounds like you're looking for CSS Modules.

The upcoming 2.0 release contains first class support for CSS Modules. Check out #3815 to get a sense for what is coming.

[marialovesbeans]

But that requires you to re-write every element

1. From <div className="someClass"/> into <div className={styles.someClass}/>,

2. And if have multiples classes: <div classNames={[styles.class1, styles.class2, styles.class3]} /> which arguably is very unclean & repetitive.

Is there any easier solution with minimal modification, like the one with Vue?

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

[Timer]

Sorry, but there's no way to accomplish this out-of-the-box with Create React App.
The library you are looking for, however, is most likely styled-jsx.

Unfortunately, you will need to eject to use this library.
If you are feeling up to it, you can rally around and push along https://github.com/zeit/styled-jsx/pull/422 / https://github.com/thysultan/stylis.js/issues/101 such that Babel Macro support is released for styled-jsx, which will allow you to use this library without ejecting.

Babel macros are a supported feature added in the upcoming 2.0 release.

Let us know if you have any questions, good luck!

[SandeepVattapparambil]

does it work with scss