如何在 svelte 中设置 AG 网格的样式？

Question

我正在尝试向我的 AG 网格添加样式，但到目前为止我还没有成功。唯一可行的方法是设置库提供的一些 css 变量，但这非常有限。我尝试扩展现有的类但我总是收到 Unused css selector 警告并且在阅读文档后我一直无法找到解决方案。

这是我的代码：

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

有没有人知道如何做到这一点？

Answer 1

如果要更改变量，请在容器元素上设置它

#datagrid {
    --ag-header-foreground-color: blue;
}

如果要更改class，请在组件内部的声明中添加:global()修饰符

:global(.ag-header-cell) {
    background: orange;
    font-size: 16px;
}

或设置一个样式表，然后将其导入到顶部

import './ownAgGridStyles.css';

>> REPL（如果出现错误 'agGrid is not defined' 将 svelte:head 元素向下移动一行）

如何在 svelte 中设置 AG 网格的样式？

How to style AG grid in svelte?

javascript

css

ag-grid

svelte