React项目中仅局部引入的Sass样式为何会全局生效

问题原因 #

CSS本身是全局作用域的，即使你仅在a、b两个模块中导入sass-style.scss，文件中的样式规则依然会被注入到全局样式表中，不会因为导入入口的限制就只作用于对应模块。
同时你两个样式文件中的选择器都是同名的.thead_bg，SCSS文件加载顺序晚于全局style.css时，同名选择器优先级更高，会覆盖全局样式，导致所有使用了.thead_bg类的元素都被应用了动态背景色。

解决方案 #

可以通过以下几种常见的React样式隔离方案解决：

• 使用CSS Modules实现样式隔离
  将sass-style.scss重命名为sass-style.module.scss，在a、b模块中按模块方式导入使用：

  // a/b模块中导入
  import styles from './sass-style.module.scss'
  // 组件内使用类名
  <div className={styles.thead_bg}></div>
  

  打包工具会自动给模块内的类名添加唯一哈希后缀，不会和全局的.thead_bg冲突，也不会污染全局样式。
• 给a、b模块增加专属父级选择器
  给a、b模块的根元素添加唯一的专属类名，比如ab-module-root，然后修改SCSS文件中的样式为嵌套规则：

  .ab-module-root .thead_bg {
    background-color: $user-setup-bg-color;
  }
  

  此时该样式只会命中ab-module-root类下的.thead_bg元素，不会影响其他模块的同名类元素。
• 使用CSS-in-JS方案
  选择styled-components、Emotion等CSS-in-JS库，直接在a、b组件内部定义动态样式，样式只会作用于当前组件，天然不会产生全局污染。
  示例（styled-components）：

  import styled from 'styled-components'
  
  const Thead = styled.thead`
    background-color: ${props => props.userSetupBgColor};
  `
  // 组件内直接使用<Thead />即可
  

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