Tengo la siguiente cuadrícula en vue.js. Quiero cambiar el fondo del encabezado de la cuadrícula y el color del texto y ocultar la barra de desplazamiento de acuerdo con estos enlaces:

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

https://www.telerik.com/forums/diseñando-el-k-grid-header-(mvc)

Pero mi css personalizado no se aplica al encabezado y contenido de la cuadrícula. ¿Cómo cambio el css de cuadrícula de kendo predeterminado?

 <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>

Eso se resuelve eliminando "alcance" de la etiqueta de estilo y agregando "! importante" a cada estilo y eliminando la clase ".no-scrollbar".