如何管理冲突的第三方CSS

我正在开发一个web应用程序，它使用Materialize作为前端框架，同时使用KendoUI作为网格组件

当剑道UI和Materialize都具有相同元素的样式时，我遇到了一些问题——例如，它们都覆盖了复选框上的样式——这会由于冲突而导致布局中断

我意识到的一个选择是选择Materialize或剑道UI，然后放弃另一个。。。不过，如果可能的话，我想避免这种情况，因为它们在很大程度上是相互补充的

如果只是一个元素在这里或那里放置特定的覆盖将是一个选项，但是随着两个框架的规模，这将是一个维护噩梦，因为当一个元素发生更改时，覆盖可能需要重构

---

有什么方法可以解决我所缺少的这个问题吗

我知道通常建议不要重复代码，您希望尝试避开覆盖，但是否可以找到您喜欢的css部分（即从materialize中选择框），并将其复制到新的自定义css文件中，重命名选择器以便您可以将其与Materialize/Kendo UI分开使用？

您可以手动编辑第十八方的样式表。采用非小型CSS，并在每个基本路径前加上一个短前缀：

.card {
    ....
}

变成

.mat.card {
    ....
 }

这样，对于每一种物化样式，您都可以在任何事情之前使用

.mat

。或者，如果您主要使用materialize，请对剑道UI执行相同的操作

---

这很痛苦，但可以解决您的问题。

解决此类冲突的一种方法是构建MaterializeCS，使其仅包含项目所需的部分

例如，如果您不需要MaterializeCSS的按钮样式，您可以通过sass简单地编译

materialize.scss

并从文件中选择按钮

如果构建Materialize的custom.css对您来说是一个长而短的过程，那么您可以尝试使用（免责声明：我构建了它）

---

了解有关如何自定义MaterializeCSS的更多信息：

我认为这是迄今为止我见过的最好的选择。感谢你和所有回复你帮助的人！对于将来偶然发现这个问题的人，你也可以在这里下载部分剑道UI脚本：@SamF我很高兴你发现它很有用。