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

mqkwyuun 于 2023-05-17 发布在 React

关注(0)|答案(5)|浏览(233)

所以我有两个组成部分…导航栏组件和AboutPage组件。
它们都在同一个目录“App”中

应用程序
-- Navbar--> Navbar.css，Navbar.js
-- AboutPage--> Aboutpage.css，Aboutpage.js

如你所见，它们有两个独立的样式表。在JS页面中，正确的CSS文件也被导入。
当我做一个这样的风格，例如：

导航栏组件 *

p { background: red }

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

reactjs

来源：https://stackoverflow.com/questions/49547239/reactjs-styles-leaking-to-other-components

5条答案

按热度按时间

ljsrvy3e1#

这是预期的行为。
无论您在哪个文件中指定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种方式。

赞(0）回复(0）举报 2023-05-17

j5fpnvbx2#

你也可以使用css模块。他们范围您的CSS本地和真棒

赞(0）回复(0）举报 2023-05-17

flvlnr443#

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

赞(0）回复(0）举报 2023-05-17

watbbzwu4#

有时我们需要一个全局CSS，即使我们使用模块导入，它也可能影响另一个组件，我在官方文档中没有找到任何答案，所以我的解决方案是在组件本身中使用类似以下代码的东西，并且，它工作得很好：）

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

赞(0）回复(0）举报 2023-05-17

bejyjqdl5#

为了防止一个组件的css类影响到其他组件，你可以尝试在css文件名上使用**.module**扩展名。
-- Navbar --> Navbar.css，Navbar.js

重命名为

-- Navbar -->Navbar.module.css，Navbar.js
当你在css文件名上添加**.module**扩展名时，它只会影响你要导入的组件。
如果您想查看更多信息，此resource将有所帮助

赞(0）回复(0）举报 2023-05-17