Question

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

他们都在同一个目录'App'

应用

- Navbar - ＆gt; Navbar.css，Navbar.js

- 关于页面 - ＆gt; Aboutpage.css，Aboutpage.js

您可以看到，它们有两个单独的样式表。在JS页面中，也正在导入正确的CSS文件。

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

Navbar Component

p { background: red }

^^此样式也适用于Aboutpage中的p。我甚至试图将关注页面中的P赋予其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;
}

如果你想要为React定义css的不同方法，除了上述方法之外，这个resource还增加了3种方法。

Answer 2

您也可以使用CSS模块。它们在本地作用域CSS，而且很棒

Answer 3

将样式范围限制到组件需要WebComponents，它依赖于几个较新的浏览器功能，特别是shadowRoot“ shadownDOM”直接支持这种分离。这些最容易与点燃元素和/或聚合物3一起使用。

ReactJS样式'泄漏'到其他组件

3 个答案: