react 中 使 css 样式局部生效

在 react 中，css 样式默认是全局生效的，想要使样式局部生效可以使用以下方案

• 给 css 文件名加一个 .module.css 后缀，编译后的 css 样式文件就会导出一个对象，为每个选择器起一个随机名字

  // 文件名假设为 index.module.css
  
  .box {
      width: 50px;
      height: 50px;
  }
  
  // 在这个文件中设置全局样式
  :global(.active) {
      color: red;
  }
  

  import React, { Component } from 'react'
  // 引入自定义样式
  import style from './index.module.css'
  
  export default class Home extends Component {
    render() {
      return (
        <div>
          <p className={style.box}>home</p>
          <p className="active">list</p>
        </div>
      )
    }
  }