如何在 Svelte 中设置 AG 网格的样式？答案

【问题标题】：How to style AG grid in svelte?如何在 Svelte 中设置 AG 网格的样式？
【发布时间】：2022-10-20 23:00:15
【问题描述】：

我正在尝试为我的 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>

有谁知道如何做到这一点？

【问题讨论】：

标签： javascript css ag-grid svelte

【解决方案1】：

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

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

如果要更改类，请将:global() 修饰符添加到组件内的声明中

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

或设置一个样式表并将其导入另一个顶部

import './ownAgGridStyles.css';

>> REPL（如果出现错误“未定义agGrid”将svelte:head元素向下移动一行）

【讨论】：

谢谢！我只是在单独的样式表中设置样式并导入它

【解决方案2】：

我不得不将我的样式添加到一个单独的 css 文件（带有类选择器的 app.css），因为 svelte 会从样式标签中删除未使用的样式，并且 ag-grid 会动态创建新的 html 元素

【讨论】：