这里的每个答案都与 CSS module有关，但 Vue 中的作用域样式以另一种方式工作。

这里是<style scoped>在 Vue中工作的 React 库：https : //github.com/gaoxiaoliangz/react-scoped-css

输入：

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

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

export default Title

输出：

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

.title[data-v-hi7yyhx] {}

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

按钮.module.css

.error {
  background-color: red;
}

另一个样式表.css

.error {
  color: red;
}

按钮.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>;
  }
}

结果：与其他 .error 类名没有冲突

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

据我所知，没有办法完全按照 Vue 的方式来做，但是有很多库可以做这种事情，这给了你很多选择，无论你喜欢什么工作。我个人的建议是情感。

React 中没有类似的东西。3种常见的风格方式：

1. 导入一个 css 文件，然后className像普通 HTML 一样使用=> 无需学习，只需添加一个import即可。
2. CSS-in-js 库。我更喜欢styled-component- 这太棒了。
3. 内联样式