【问题标题】：Prevent global css to affect my react npm package elements防止全局 css 影响我的 react npm 包元素
【发布时间】：2020-04-12 06:21:06
【问题描述】：

我开发了一个 react npm 包，包含 element. 安装在react项目中时，父项目的ul css会影响npm包的，

如何封装 npm 包以防止任何全局 css 影响它？不使用 iframe。

例如：

使用 npm 包的全局项目

ul {
 padding : 30px
}

我的 npm 包中的所有元素都将有 30px 的填充 ...

【问题讨论】：

标签： css reactjs npm

【解决方案1】：

这很有趣。所以我的思考过程会是这样的 -

第一次尝试

用一些类名包装你的包元素，以表明在此之下，样式不应该通过。前任。 class="restricted-from-project-styles"
然后在您的项目中添加这样的样式 -

body :not(.restricted-from-project-styles) {
 // Apply all your project styles here.
}

但这不起作用，因为它只忽略第一级元素。

例如。 - 尝试在堆栈溢出上运行它。直接在顶栏内的元素会被忽略，但它的子元素不会。

body :not(.top-bar) * {
  display: none;
}

第二次尝试

npm-package 的所有元素都必须有一个类前缀，这样在父项目中很难有这样的类。我可以使用 BEM 命名约定来执行此操作。

但这也不起作用，因为应用于标记名称的样式仍将被传递。

嗯....我希望随机类名来限制从父级传递的样式。但我也想忽略 HTML 标记样式。

第三次尝试

将范围内的重置 css 样式应用到包元素的根目录

为了有效地管理样式，镇上有一个新男孩 styled-components。

看到这个video for introduction

我希望这能给你一个开始点。

【讨论】：

感谢您的回答，我已经经历了第一次和第二次尝试，而不是第三次，因为 npm 上 styled-component 的包重量为 1.41 MB...

【解决方案2】：

你能做的最好的就是使用CSS all property:

.my-app-container * {
    all: initial;
    // or
    // all: unset;
}

all 简写 CSS 属性重置元素的所有属性

initial CSS keyword 应用初始（或默认）值元素的属性。这个初始值是由浏览器设置的。

【讨论】：

【解决方案3】：

我还制作了私有 npm 包，将我的 css 与全局隔离

你可以使用

LESS
Chokidar（观察者）

在制作全新包的同时防止全局css影响我们的本地css

较少生成带有您的css前缀类的新文件，并且观察者不断构建您的带有前缀类的css

假设你有 styles1.css 文件并且有代码

ul {
 padding : 30px
}

然后您可以通过

将前缀类附加到您的类

.style1 {
    @import (less) 'style1.css';
}

然后生成的文件有代码

.style1 ul {
 padding : 30px
}

然后你可以像这样将 .style1 类添加到你的包的父 div 中

<div className="style1">
  <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
</div>

你可以测试我的EXAMPLE (chokidar + less) 项目

【讨论】：

所以即使我们在全局项目中有 ul 样式，也不会影响本地包？
是的，如果你使用从less生成的style.css，全局ul不会生效。您可以查看示例项目
@sidali 你检查了吗？

【解决方案4】：

如果您向元素添加特定的类名，则没有该类名的全局规则将被您的规则覆盖。例如：

您的组件：

    <div class="my-component">
        <ul> ... </ul>
    </div>

你的 CSS：

.my-component ul {
    padding: 10px;
}

现在如果有人添加

ul {
    padding: 30px;
}

它不会影响您的组件。那是因为您的 CSS 规则更具体（因为它需要 my-component 类）。

请注意，您未指定的规则将受到全局 CSS 的影响。

【讨论】：