Question

我正在开发一个Web应用程序，该应用程序使用Materialize作为前端框架以及网格组件的Kendo UI。

在Kendo UI和Materialize都具有相同元素的样式的情况下，我遇到了问题 - 例如，它们都覆盖了复选框上的样式 - 由于碰撞，这会导致布局中断。

我意识到的一个选择是选择Materialise或Kendo UI并放弃另一个......但是如果可能的话我想避免这种情况，因为它们在很大程度上很好地补充了彼此的弱点。

如果它只是一个元素或者那里放置特定的覆盖将是一个选项，但是对于两个框架的规模，这将是一个维护噩梦，因为当一个更改覆盖时可能必须重构。

有什么方法可以解决我错过的这个问题吗？

Answer 1

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

例如，如果你不需要MaterializeCSS的按钮样式，你可以简单地通过sass编译文件中的materialize.scss和樱桃选择按钮。

如果沿着构建自定义.css of Materialize的路径向您展示，您可以尝试使用materialize.khophi.co（免责声明：我构建它）。

Answer 2

我知道通常建议不要重复代码，并且你想尝试避免覆盖，但是可以找到你喜欢的css部分（即从实现中选择框）并将其复制到新的自定义css文件，重命名选择器，以便您可以从Materialise / Kendo UI单独使用它？

Answer 3

您可以手动编辑eighter party的样式表。使用非缩小的CSS，并在每个基本路径前加上一个简短的前缀：

.card {
    ....
}

成为

.mat.card {
    ....
 }

这样，对于每种实体化样式，在任何事情之前都使用.mat。或者，如果您主要使用实现，请为Kendo UI执行相同的操作。

这很痛苦，但会解决你的问题。