javascript - ReactJS 样式 'leaking' 到其他组件

Question

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

它们都在同一个目录，'App'

应用

-- 导航栏 --> Navbar.css, Navbar.js

-- AboutPage --> Aboutpage.css, Aboutpage.js

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

例如，当我做这样的样式时:

导航栏组件

p { background: red }

^^ 这种风格也适用于关于页面中的 p。我什至尝试给 Aboutpage 中的 P 添加它的 on 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 种方式。