css - 防止全局 CSS 影响我的 React npm 包元素

Question

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

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

例如:

使用 npm 包的全局元素

ul {
 padding : 30px
}

我的 npm 包中的所有元素都会有 30px 的内边距 ...

Answer 1

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

第一次尝试

1. 用一些类名包裹你的包元素，以表明在此之下，样式不应通过。前任。类=“restricted-from-project-styles”
2. 然后在您的元素中添加这样的样式 -

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

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

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

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

第二次尝试

• npm-package 的所有元素都必须有一个类前缀，这样父元素中很难有这样的类。我可以使用 BEM 命名约定来做到这一点。

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

Hmm.... I would want random class names to limit styles being passed from parent. But I would also like to ignore HTML-tag styles.

第三次尝试

• 应用范围为包元素根的重置 CSS 样式

为了有效地管理样式，镇上有一个新男孩样式组件。

查看此video for introduction

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