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

【问题标题】：ReactJS styles 'leaking' to other componentsReactJS 样式“泄漏”到其他组件
【发布时间】：2018-03-29 02:49:04
【问题描述】：

所以我有两个组件...一个导航栏组件和一个 AboutPage 组件。

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

应用

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

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

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

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

导航栏组件

p { background: red }

^^ 这种风格也适用于 Aboutpage 中的 p。我什至试图给 Aboutpage 中的 P 赋予它的 on id 并以这种方式设置它的样式，但它仍然失败。

【问题讨论】：

你能告诉我们css是如何被包含进来的吗？
不要自己写标签的样式，把样式写在你的className或id上。你写这个样式的方式会影响页面中的所有p。
所以我必须给我想在 react js 中设置样式的每个元素一个 id 或 className 以便设置它的样式并且不与其他组件的样式冲突？
@smit.我面临同样的问题，但接受的答案对我不起作用。我正在像 import './css/Navbar.css' 这样导入 css，因为我的 css 在 css 文件夹中。

标签： javascript css reactjs

【解决方案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 的不同方式，除了上述方式之外，resource 还添加了另外 3 种方式。

【讨论】：

非常感谢您的解释。从 Angular 跳到 React 给了我对组件范围样式的期望 :( 虽然我不介意指定。
没问题。还有 React Styled-Components github.com/styled-components/styled-components，它几乎可以做同样的事情

【解决方案2】：

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

【讨论】：

【解决方案3】：

为组件定义样式需要 WebComponents，它依赖于几个较新的浏览器功能，尤其是直接支持这种分离的 shadowRoot "shadownDOM"。这些最容易与 lit-element 和/或 Polymer 3 一起使用。

【讨论】：

【解决方案4】：

有时我们需要一个全局 CSS，即使我们使用模块导入，它也会影响另一个组件，我在官方文档中没有找到任何答案，所以我的解决方法是在组件本身中使用类似以下代码的内容，而且，它工作正常:)

        <style>
            {
            `
               @page {
                padding:0;
                margin-top:0;
                margin-bottom: 0;
                margin-left: 0;
                margin-right:0;
            }
            @media print {
              @page {
                size: 80mm 21cm;
             }
            }
            `
            }
        </style>

【讨论】：