Create React App中React组件CSS隔离方案咨询

嘿，我来帮你逐个理清这些关于React样式隔离的问题！

1. Create React App中使用CSS Modules是否需要eject？ #

完全不需要！Create React App从v2版本开始就内置支持CSS Modules了，你根本不用执行eject命令。只要把你的样式文件命名为[文件名].module.css（或者.module.scss/.module.styl），CRA会自动帮你处理局部作用域，生成带唯一哈希值的类名，避免样式冲突。

2. CSS Modules能否和带嵌套语法的SCSS结合？当然可以！ #

SCSS的嵌套语法和CSS Modules完全兼容，处理起来也很简单。比如你有这样的嵌套SCSS代码：

// Navbar.module.scss
.navbar-side {
  background-color: #f5f5f5;
  
  .navbar-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
}

在JSX中调用时，你需要给父元素和子元素分别绑定对应的局部类名：

import styles from './Navbar.module.scss';

function Navbar() {
  return (
    <div className={styles['navbar-side']}>
      <div className={styles['navbar-item']}>首页</div>
      <div className={styles['navbar-item']}>我的</div>
    </div>
  );
}

这里有个小技巧：如果你把SCSS里的类名改成驼峰式（比如navbarSide和navbarItem），就可以用点语法直接访问，不用写方括号：

// Navbar.module.scss
.navbarSide {
  background-color: #f5f5f5;
  
  .navbarItem {
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
}

// JSX中
<div className={styles.navbarSide}>
  <div className={styles.navbarItem}>首页</div>
</div>

CSS Modules会自动把这些类名编译成类似Navbar_navbarSide__abc123的唯一类名，完美实现样式隔离。

3. 不想用CSS Modules？还有这些方案可选 #

方案一：CSS-in-JS库（最推荐） #

如果你愿意把样式写在JS里，styled-components或者Emotion是非常好的选择。它们天然实现局部样式隔离，还支持动态样式、主题切换等高级功能。举个styled-components的例子：

import styled from 'styled-components';

const NavbarSide = styled.div`
  background-color: #f5f5f5;
`;

const NavbarItem = styled.div`
  padding: 0.5rem 1rem;
  cursor: pointer;
  
  &:hover {
    background-color: #e0e0e0;
  }
`;

function Navbar() {
  return (
    <NavbarSide>
      <NavbarItem>首页</NavbarItem>
      <NavbarItem>我的</NavbarItem>
    </NavbarSide>
  );
}

方案二：预处理器+手动唯一前缀 #

如果你还是喜欢单独写SCSS/Stylus文件，可以给每个组件的样式加一个唯一的父类前缀（比如组件名），手动实现作用域隔离：

// Navbar.scss
.navbar-component {
  .navbar-side {
    background-color: #f5f5f5;
  }
  
  .navbar-item {
    padding: 0.5rem 1rem;
  }
}

然后在JSX中给组件根元素加上这个前缀类：

import './Navbar.scss';

function Navbar() {
  return (
    <div className="navbar-component">
      <div className="navbar-side">
        <div className="navbar-item">首页</div>
      </div>
    </div>
  );
}

这种方式需要你自己保证前缀的唯一性，不如CSS Modules自动，但也能达到隔离效果。

方案三：Stylus + :local()（本质是自定义配置的CSS Modules） #

你看到的用:local(.container)的方式，其实还是基于CSS Modules的能力，只是项目没有用.module.styl的命名规则，而是通过自定义webpack配置让所有Stylus文件都启用CSS Modules。在CRA中，你可以用craco或者react-app-rewired来修改配置，不用eject。

举个用craco的例子：

1. 先安装依赖：

npm install @craco/craco craco-stylus --save-dev

2. 在项目根目录创建craco.config.js：

module.exports = {
  plugins: [{ plugin: require('craco-stylus') }],
  style: {
    modules: {
      auto: true, // 自动把所有Stylus文件当作CSS Modules处理
      localIdentName: '[name]__[local]__[hash:base64:5]' // 自定义类名格式
    }
  }
};

3. 修改package.json里的启动命令，把react-scripts换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

之后你就可以在Stylus文件里用:local()标记局部类（默认所有类都是局部的，:local()可以显式声明）：

// Navbar.styl
:local(.navbar-side)
  background-color #f5f5f5
  
  .navbar-item
    padding 0.5rem 1rem

JSX中的调用方式和CSS Modules一样：

import styles from './Navbar.styl';

function Navbar() {
  return (
    <div className={styles['navbar-side']}>
      <div className={styles['navbar-item']}>首页</div>
    </div>
  );
}

如果想让某个类全局生效，用:global()包裹即可，比如:global(.btn)，这个类不会被哈希化，是全局可用的。

内容的提问来源于stack exchange，提问作者EdG