javascript - 如何禁用 Kendo UI 中的默认 css？

Question

在我的应用程序中，我为“INPUT”、“SELECT”等使用全局定义 CSS，当我尝试使用 KendoUI 小部件时，我遇到了格式化问题 - KendoUI 小部件使用我的默认样式 CSS。

例如我使用:

.m-forms SELECT,
.m-forms TEXTAREA,
.m-forms INPUT[type=text] {
...
}

我试着这样解决这个问题:

.m-forms :not([class^="k-widget"]) SELECT,
.m-forms :not([class^="k-widget"]) TEXTAREA,
.m-forms :not([class^="k-widget"]) INPUT[type=text] {
...
}

但这行不通。如何在 KendoUI 小部件中禁用我的默认样式？我的示例 DOM 树是这样的: my page source code

Answer 1

KendoUI 总是在您的应用程序运行时注入(inject)这些类。所以如果你不喜欢默认颜色，你可以用你的颜色覆盖它。因此，您创建一个 css 文件并将其包含在页面中。只要确保你的 css 文件是在 KendoUI css 之后。 KendoUI css 运行后，您的 css 将覆盖 KendoUI 的 css

然后用你的选择覆盖，例如

.m-forms :not([class^="k-widget"]) SELECT,
.m-forms :not([class^="k-widget"]) TEXTAREA,
.m-forms :not([class^="k-widget"]) INPUT[type=text] {

  color: #FFFFFF;
  padding: 30px;
  font-size: 10px;
}