如何覆盖 Kendo 网格 CSS

Question

我在 vue.js 中有以下网格。我想根据这些链接更改网格 header 背景和文本颜色并隐藏滚动条：

https://docs.telerik.com/kendo-ui/knowledge-base/hide-scrollbar-when-not-needed

https://www.telerik.com/forums/styling-the-k-grid-header-(mvc)

但我的自定义 css 不适用于网格 header 和内容。如何更改默认 kendo 网格 css?

<template>
    <div id="kgrid">
          <kendo-datasource ref="datasource1"
                            :transport-read-url="url + 'mylist/all'"
                            :page-size="'10'"
                            :schema-data="'data'"
                            :schema-total="'total'"
                            :transport-read-type="'POST'"
                            :transport-read-data-type="'json'"
                            :transport-read-content-type="'application/json'"
                            :transport-parameter-map="parameterMap"
                            :request-start="onBeforeSend"
                            :error="onError"
                            :server-paging="true"
                            :server-filtering="true">
          </kendo-datasource>
          <kendo-grid
                      :height="400"
                      :data-source-ref="'datasource1'"
                      :data-items="data"
          >
            <kendo-grid-column :field="'text'"
                               title="text">
            </kendo-grid-column>
          </kendo-grid>
        </div>
</template>
<script>
import {Grid, GridColumn} from '@progress/kendo-grid-vue-wrapper';
import {KendoDataSource} from '@progress/kendo-datasource-vue-wrapper';
export default {
  components: {
    'kendo-grid': Grid,
    'kendo-grid-column': GridColumn,
    'kendo-datasource': KendoDataSource
  },
}
</script>
<style scoped>
#kgrid .no-scrollbar .k-grid-header
{
    padding: 0 !important;
}

#kgrid .no-scrollbar .k-grid-content
{
    overflow-y: visible;
}
#kgrid .k-grid-header .k-header
{
    background-color: black;
    color: white
}
</style>

通过从样式标签中删除“scoped”并将“!important”添加到每个样式并删除“.no-scrollbar”来解决这个问题 class.

Answer 1

将这些样式放入您的全局样式中或从您的样式标签中删除范围。

并用于每种样式！重要。

应该可以。

Answer 2

使用 Progess 网站上的 theme builder 并仅选择网格组件。完成后下载文件并将它们复制到您的样式文件夹。

如何覆盖 Kendo 网格 CSS

How to override Kendo grid CSS

javascript

css

vue.js

kendo-ui

kendo-grid