Estoy tratando de agregar estilo a mi cuadrícula AG, pero hasta ahora no he tenido éxito. La única forma que ha funcionado es establecer algunas variables css proporcionadas por la biblioteca, pero eso es bastante limitado. Intenté extender las clases existentes, pero siempre recibo una advertencia de Unused css selector y no he podido encontrar una solución después de leer la documentación.

Este es mi código:

 <script lang="ts"> import { onDestroy, onMount } from 'svelte'; import { Grid } from 'ag-grid-community'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; let domNode: HTMLDivElement; let grid: Grid; // specify the columns const columnDefs = [{ field: 'make' }, { field: 'model' }, { field: 'price' }]; // specify the data const rowData = [ { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxter', price: 72000 } ]; // let the grid know which columns and what data to use const gridOptions = { defaultColDef: { flex: 1, minWidth: 150, filter: true, resizable: true, sortable: true, }, columnDefs: columnDefs, rowData: rowData }; onMount(() => { grid = new Grid(domNode, gridOptions); }); onDestroy(() => { if (grid) { grid.destroy(); } }); </script> <div style="display: flex; justify-content: center; align-items: center;"> <div id="datagrid" bind:this={domNode} class="ag-theme-alpine" style="height: 70vh; width: 100%;" /> </div> <style lang="scss"> .ag-theme-alpine { --ag-header-background-color: rgb(223, 66, 101); --ag-header-foreground-color: #fff; } </style>

¿Alguien tiene una idea de cómo hacer esto?