Really like Vue's solution for css, how about a similar one like this for React?

Do you want to request a feature or report a bug? feature

What is the expected behavior? So I really like Vue’s solution for css, how about a similar one like this for React?

// App.js
import Scoped from "scoped-css"
import style from "./App.css"

const App = () =>
<Scoped style={style}>
   <div className="App">
        <div className="header">
          <h2>Welcome to React</h2>
        </div>
        <p className="intro">
          To get started...
        </p>
      </div>
</Scoped>

//App.css
.App { ... }
.header { ... }
.intro { ... }

CSS will apply to elements of the current component only, and parent component’s styles will not leak into child components.

[lorenzorapetti]

I think that styled-jsx and CSS Modules already achieve what you’re thinking of.

[NE-SmallTown]

https://github.com/gajus/babel-plugin-react-css-modules ?