在ag-grid列上应用多个cellClass

我正在尝试在ag-grid(社区版)单元上应用多个单元类。我想更改单元格背景并将单元格字体设置为等宽字体。我定义了两个columnTypes:TomatoBackground和monospaceFont。接下来,我设置提供两个columnTypes的表列的“ type”属性。

columnDefs: [
    {
        headerName: "Athlete",
        field: "athlete"
    },
    {
        headerName: "Sport",
        field: "sport"
    },
    {
        headerName: "Age",
        field: "age",
        type: ["tomatoBackground", "monospaceFont"]
    }
]

columnTypes: {
    tomatoBackground: {
        cellClass: "ag-cell--tomato-background"
    },
    monospaceFont: {
        cellClass: "ag-cell--monospace-font"
    }
}

CSS代码:

.ag-cell {
   &--tomato-background {
      background-color: tomato;
   }

   &--monospace-font {
      font-family: monospace, 'Roboto', sans-serif;
   }
}

不幸的是,实际上只有最后一个cellClass应用于“年龄”列(在本例中为monospaceFont)。 对于我来说,创建一个同时具有CSS属性(番茄背景和等宽字体)的CSS类不是一个选择。

有人可以帮助解决问题吗?可能吗一个例子将不胜感激。

评论