如何定义在ag-grid单元样式内使用的其他CSS类

Question

我正在尝试根据用户输入的值为该列的单元格着色。
这是它的定义：

{
      headerName: "Test column",
      field: "test",
      width: 150,
      editable: true,
      cellClassRules: {
        "rag-green": "x == 'A. Extremely serious'",
        "rag-amber": "x == 'B. Very serious'",
        "rag-red":"x == 'C. Serious'",
        "sandybrown": "x == 'D. Minor'",
        "red": "x == 'E. Not significant'"
      }
    }

基于文档： ag-grid Styling & Appearance Documentation
我设法使用“抹绿色”，“抹琥珀”和“抹红色”。 但是，当我尝试在以下位置定义其他单元格类时：

  

app.component.css：

.ag-theme-balham .sick-days-warning {
  background-color: sandybrown !important;
}
.ag-theme-balham .sick-days-breach {
  background-color: lightcoral !important;
}

并尝试在第四行中使用其中之一。没用
所以这是我的问题：
1 /如何定义在网格样式中使用的其他类，例如“ rag-green”，“ rag-amber”和“ rag-red”？
2 /在哪里定义“ rag-green”，“ rag-amber”和“ rag-red”类？还有其他我可以使用的预定义CSS类吗？
3 /为什么第四行CSS类不起作用？
谢谢！