重置 `!important` CSS 并允许使用 JS 设置样式
Reset `!important` CSS and allow styling with JS
我正在构建一个将直接嵌入第三方网站的 React 小部件。我想完全重置应用到我的小部件容器 <div> 的 CSS，这样它就不会受到主机站点的 CSS（包括 !important）的影响。该项目使用 React、Webpack、CSS modules 和一些 PostCSS 插件。
我的 CSS 模块设置确实创建了唯一的私人 CSS 名称，这些名称不应与主机站点的 CSS 冲突。但是，这不能防止主机站点 CSS，例如只选择所有 buttons.
为了解决这个问题，我一直在使用 Cleanslate 作为重置样式表，它使用所有 !important 规则。这成功地阻止了来自主机站点的 CSS 被应用。但是，为了在 Cleanslate 之上应用我自己的 CSS，我必须在我的所有 CSS 上使用 !important 并增加我的 CSS 的特异性。我正在使用 PostCSS 插件来完成这两项工作。
不过，我也想在React中设置一些样式。我一直在为我的 DOM 元素添加内联样式（例如 style={{ color: "red" }}）。但是，由于我将 !important 添加到我的所有 CSS，这些内联样式总是被我的其他 CSS.
覆盖
除了 Cleanslate：
- 我查看了
all: unset，但 运行 遇到了与 Cleanslate 相同的问题——要覆盖 !important CSS，我必须使用 !important在我所有的 CSS.
- 我也考虑过像
styled-components 这样的 CSS-in-JS 解决方案，但是 styled-components 至少没有一个简单的方法来始终应用 !important （您可以使用 &&& 提高特异性，但这不会覆盖 !important).
任何关于更改我当前的 CSS/JS 设置或可以实现此设置的其他设置的建议，我们将不胜感激。 （也许影响非常深远 !important 主机站点 CSS 只是边缘情况太小而无需担心。）谢谢！
TL;DR：第三方网站上的 React 小部件。我想覆盖主机站点的 CSS（包括 !important），但也可以使用 JS 设置样式。
Shadow dom 之前的顶级技术是 <iframe>，但在外部配置或做出一些智能行为是一件痛苦的事情。
看看影子dom：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow dom 是一个非常酷的普通功能，可让您创建 Web 组件。在幕后，Angular 也使用它。
以前曾经自己做过一个widget。并经历了所有的选择，但最后，我发现最好的解决方案是阴影 dom 和 JivoChat 通过创建自己的元素来做类似的事情 <jdiv> 这将允许你封装和安全地设计您的小部件。
检查 JivoChat：https://www.jivochat.com/
我正在构建一个将直接嵌入第三方网站的 React 小部件。我想完全重置应用到我的小部件容器 <div> 的 CSS，这样它就不会受到主机站点的 CSS（包括 !important）的影响。该项目使用 React、Webpack、CSS modules 和一些 PostCSS 插件。
我的 CSS 模块设置确实创建了唯一的私人 CSS 名称，这些名称不应与主机站点的 CSS 冲突。但是，这不能防止主机站点 CSS，例如只选择所有 buttons.
为了解决这个问题，我一直在使用 Cleanslate 作为重置样式表，它使用所有 !important 规则。这成功地阻止了来自主机站点的 CSS 被应用。但是，为了在 Cleanslate 之上应用我自己的 CSS，我必须在我的所有 CSS 上使用 !important 并增加我的 CSS 的特异性。我正在使用 PostCSS 插件来完成这两项工作。
不过，我也想在React中设置一些样式。我一直在为我的 DOM 元素添加内联样式（例如 style={{ color: "red" }}）。但是，由于我将 !important 添加到我的所有 CSS，这些内联样式总是被我的其他 CSS.
除了 Cleanslate：
- 我查看了
all: unset，但 运行 遇到了与 Cleanslate 相同的问题——要覆盖!importantCSS，我必须使用!important在我所有的 CSS. - 我也考虑过像
styled-components这样的 CSS-in-JS 解决方案，但是styled-components至少没有一个简单的方法来始终应用!important（您可以使用&&&提高特异性，但这不会覆盖!important).
任何关于更改我当前的 CSS/JS 设置或可以实现此设置的其他设置的建议，我们将不胜感激。 （也许影响非常深远 !important 主机站点 CSS 只是边缘情况太小而无需担心。）谢谢！
TL;DR：第三方网站上的 React 小部件。我想覆盖主机站点的 CSS（包括 !important），但也可以使用 JS 设置样式。
Shadow dom 之前的顶级技术是 <iframe>，但在外部配置或做出一些智能行为是一件痛苦的事情。
看看影子dom：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow dom 是一个非常酷的普通功能，可让您创建 Web 组件。在幕后，Angular 也使用它。
以前曾经自己做过一个widget。并经历了所有的选择，但最后，我发现最好的解决方案是阴影 dom 和 JivoChat 通过创建自己的元素来做类似的事情 <jdiv> 这将允许你封装和安全地设计您的小部件。
检查 JivoChat：https://www.jivochat.com/