score: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.

score:0

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

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;

score:1

there's nothing like that in react. 3 common ways to style:

  1. import a css file then use classname like normal html => nothing have to learn, just add an import and you ready to go.
  2. css-in-js libraries. i prefer styled-component - it's awesome.
  3. inline style

score:8

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:14

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

Related Query

More Query from same tag