我正在开发一个 Web 应用程序，它使用 Materialize 作为前端框架以及用于网格组件的 Kendo UI。
如果 Kendo UI 和 Materialize 都具有相同元素的样式，我会遇到问题 - 例如，它们都覆盖了复选框上的样式 - 这会由于冲突而导致布局损坏。
我意识到的一个选择是选择 Materialise 或 Kendo UI，然后放弃另一个……但是，如果可能的话，我想避免这种情况，因为它们在很大程度上可以很好地补充彼此的弱点。
如果它只是一个元素在这里或那里放置特定的覆盖将是一种选择，但是对于两个框架的规模，这将是一场维护噩梦，因为当一个人更改覆盖时可能必须重构。
有什么方法可以解决我缺少的这个问题吗？
【问题讨论】：
标签： css kendo-ui kendo-grid materialize
解决这种冲突的一种方法是构建您的 MaterializeCSS 以仅包含项目所需的部分。
例如，如果您不需要 MaterializeCSS 的按钮样式，您可以简单地通过 sass 编译 materialize.scss 并从文件中挑选按钮。
如果在构建 Materialize 的自定义 .css 的道路上对您来说很短，您可以尝试使用 materialize.khophi.co（免责声明：我构建了它）。
了解有关如何自定义 MaterializeCSS 的更多信息：http://materializecss.com/getting-started.html
【讨论】：
我知道通常建议不要复制代码，并且您想尝试避免覆盖，但是是否可以找到您喜欢的 css 部分（即从实现中选择框）并将其复制到新的自定义 css 文件，重命名选择器，以便您可以将其与 Materialize/Kendo UI 分开使用？
【讨论】：
您可以手动编辑八方的样式表。采用未缩小的 CSS，并在每个基本路径前加上一个短前缀：
.card {
....
}
变成
.mat.card {
....
}
这样，对于每种具体化样式，您都可以在任何东西之前使用.mat。或者，如果你主要使用 materialize，对 Kendo UI 做同样的事情。
这很痛苦，但会解决你的问题。
【讨论】：