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

Question

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

它们都在同一个目录中，“应用程序”

应用程序

--导航栏 --> 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>s。

如果要为每个组件指定 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 的不同方式，除了上述方式之外，该资源还添加了 3 种方式。