javascript - 如何在 react 中添加作用域的CSS？

Question

是否有一个 React 等价于 Vue 中的 scoped css，它 super 容易使用，无需大量重写？我可以只导入一个现有的 css 文件，然后将它连接到一个组件，然后就可以正常工作了？

在 Vue 中，就像

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

砰!您的 CSS 现在限定在您的组件内。

React 中有类似的东西吗？就像是

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

Answer 1

这里的每个答案都是关于 CSS 模块的，但是 Vue 中的作用域样式以另一种方式工作。

这里的 React 库的工作方式类似于 <style scoped>在 Vue 中: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] {}