React JS中如何为新组件创建独立CSS文件并避免样式冲突

• React 中普通 .css 文件默认是全局作用域，只要在任意组件中引入，样式规则都会注入到当前页面的全局样式表中，所以你在 blog.css 中写的 h2 选择器会匹配整个应用所有的 h2 标签，自然会影响 App.js 中的标题样式，和样式量多少无关。
• 你用到的 NewWindowComponent 是通过 React Portal 将内容渲染到新打开的独立窗口中，默认情况下父窗口的样式不会自动同步到新窗口，就算你写了样式，新窗口的Blog组件也拿不到。

方案1：不用CSS Module，通过类名限定避免冲突 #

1. 编写blog.css时，给所有Blog组件的样式加专属父类前缀，避免全局匹配：

/* blog.css */
.blog-container h2 {
    font-style: italic;
    font-weight: lighter;
    color: red;
    padding-left: 450px;
    position: relative;
    font-size: 50px;
}
/* 其他Blog组件的样式都加.blog-container前缀 */

2. 修改Blog.js，给最外层容器加上专属类名：

// Blog.js 引入样式
import '../components/blog.css'
// render返回最外层加类名
return (
  <div className="blog-container">
    {/* 原有内容不变 */}
  </div>
)

方案2：使用CSS Module（推荐，哪怕样式少也不会有任何冲突） #

你之前已经引入了Blog.module.css但没有实际使用，只要按规则绑定类名即可：

1. 编写Blog.module.css：

.blog-title {
    font-style: italic;
    font-weight: lighter;
    color: red;
    padding-left: 450px;
    position: relative;
    font-size: 50px;
}

2. 修改Blog.js绑定类名：

import BlogCSS from '../components/Blog.module.css';
// 给需要的h2绑定类名
<h2 className={BlogCSS['blog-title']}>Welcome to my Blog!</h2>

CSS Module会自动给类名加上唯一哈希后缀，永远不会和全局样式冲突。

额外修改：同步样式到新窗口 #

修改NewWindowComponent.js的componentDidMount方法，把父窗口的样式复制到新打开的窗口中，否则新窗口里的Blog组件样式不会生效：

componentDidMount() {
  this.externalWindow = window.open('', 'NewWindowComponent');
  if (this.externalWindow) {
    // 复制父窗口所有样式到新窗口
    const allStyles = document.querySelectorAll('style, link[rel="stylesheet"]');
    allStyles.forEach(item => {
      this.externalWindow.document.head.appendChild(item.cloneNode(true));
    })
    this.externalWindow.document.body.appendChild(this.containerEl);
    this.externalWindow.onunload = () => this.props.onClose();
  }
}

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