如何覆盖Kendo Grid CSS
我在vue.js中遵循网格我想更改网格标题背景和文本颜色，并根据以下链接隐藏卷轴：
https://docs.telerik.com/kendo-ui/kendoledge-base/hide-scrollbar-when-when-when-when-not-not-needed
https：//www.telerik.com/forums/forums/styling-tyling-tyling-ty-ty-the--k-k-grid-header - （MVC）
但是我的自定义CSS确实不适用于网格标头和内容。如何更改默认的Kendo Grid 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>
通过从样式标签中删除“范围”并添加“！
I have following grid in vue.js. I wanna to change the grid header background and text color and hide the scrollbar according to these links:
https://docs.telerik.com/kendo-ui/knowledge-base/hide-scrollbar-when-not-needed
https://www.telerik.com/forums/styling-the-k-grid-header-(mvc)
But my custom css does'nt apply to grid header and content. How do I change default kendo grid 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>
That's solved by removing "scoped" from style tag and adding "!important" to every style and removing ".no-scrollbar" class.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将这些样式放入您的全球样式中，或从样式标签中删除范围。
并适用于每种样式！
那应该起作用。
put these styles in your global styles or remove the scoped from your style tag.
And use for every style !important.
That should work.
使用
Use the theme builder at Progess website and choose only the grid component. when you're done download the files and copy them to you're styles folder.