ReactJS样式“泄漏”给其他组件

Question

所以我有两个组成部分..。一个Navbar组件和一个AboutPage组件。

它们都在同一个目录中，“App”

应用程序

-- Navbar -> Navbar.css，Navbar.js

-- AboutPage --> Aboutpage.css，Aboutpage.js

因此，正如您所看到的，它们有两个独立的样式表。在JS页面中，也会导入正确的CSS文件。

例如，当我做这样的风格时：

Navbar组件

p { background: red }

^^此样式也适用于Aboutpage中的p。我甚至试着给P在Aboutpage上的id和样式，它的方式，它仍然失败。

Answer 1

这就是人们所期望的行为。

无论您指定哪个文件，比如p { background: red }，它都将应用于所有DOM。指定和id属性也不能工作。上述规则具有足够的通用性，适用于所有<p>。

如果要为每个组件指定css文件，还应该创建特定于组件的css类。就像下面的例子。

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  <div className="DottedBox">
    <p className="DottedBox_content">Get started with CSS styling</p> 
  </div>
);

export default DottedBox;

及其css文件：

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

如果您想要使用不同的方法来定义css以作出反应，那么除了上面的方法之外，这个资源还添加了3种其他的方法。

Answer 2

您也可以使用css模块。它们将您的CSS定位在本地，并且非常棒。

Answer 3

组件的作用域样式需要WebComponents，它依赖于几个较新的浏览器特性，特别是直接支持这种分离的shadowRoot "shadownDOM“。这些是最容易使用的发光元素和/或聚合物3。