react中的css隔离

一般情况下，我们在react中写css，都是直接以文件形式来写，然后再组件中进行引用，但是这种写法会导致相同class名称引起的样式冲突，这就要求我们在写class时对命名有严格的要求，比如前缀增加组件名。

但是这种方式个人感觉很繁琐，使用过VUE的小伙伴应该都了解，在vue中会有scoped这个概念，使得样式有了作用域，避免了全局污染的情况。受此启发，我们可以在react中实现类似的方案。

function App() {
  return (
    <div className="app" data-component="app">
      <div className="body">
        <p className="title">标题</p>
        <p className="content">内容</p>
      </div>
    </div>
  );
}

css中这样写

[data-component=app] {
  .body {
    padding: 20px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .content {
      font-size: 16px;
      color: #66666;
    }
  }
}

data-component可以限制为每个组件的名字，因为className可能会出现重复，但是组件名字在同一个项目中基本不会重复。

这样就解决了css class全局污染的问题。简单易用，不用引入新的概率和扩展。