时间戳

首页 > 解决方案 > 如何在跨站点的 CSS 中保持样式一致？

html - 如何在跨站点的 CSS 中保持样式一致？

问题描述

我正在使用 react 构建一个可插入的聊天机器人小部件。我的目标是一个聊天机器人小部件，你可以在任何网站上使用它，比如rasa-webchat。

当我在一些网站上使用它时，我发现它的样式被添加了小部件的基础站点覆盖。在调试时，我发现基础站点!important在他们的 CSS 中使用了类似的样式

a {
  color: blue !important;
}

这真的搞砸了我的小部件样式，所以无论我在小部件 CSS 中使用了多么具体的样式，它都会被具有!important. 我发现'css-modules'，'react-jss'库来限定css，但没有一个能够覆盖！important，我发现的唯一方法是添加!important到我的CSS中的所有样式，但这被认为是一种不好的方法，因为我正在使用 material-ui 来构建我的聊天机器人，我相信很难将其添加!important到库本身的每一种样式中。

有什么方法可以确保我的小部件样式看起来相同，而与基本站点 CSS 无关？

标签： htmlcssreactjsmaterial-ui

解决方案

我个人的偏好是使用样式化组件。

使用样式化组件，您可以覆盖具有更高特异性的样式。在此处找到的文档中的示例完全涵盖了您的要求。

使用 Styled 组件还有许多其他好处，从可读性到性能提升。

样式化组件文档

推荐阅读