css - Ag-grid 将某些列的列单元格文本设置为右侧

Question

我正在尝试为 React Ag-grid 应用程序中的特定列标题设置样式。

通过阅读文档，我正在使用 ag-theme-balham，并且在我的 css 文件中创建了一个新类:

.ag-theme-text-right {
    font-size: xx-large;
    color: red;
    text-align: right;
  }

我使用 headerClass 将该类应用于特定列。

{
   headerName: "Comic", field: "price", headerClass: 'ag-theme-text-right'
}

当我运行应用程序时，会应用字体大小和颜色样式，但文本仍然左对齐。

从我的浏览器中检查， .ag-header-group-cell-label, .ag-header-cell-label 覆盖 headerClass。值得注意的是 'display: flex' 正在强制文本对齐。当我禁用 'display: flex' 时，我类(class)中的 text-align 生效。

是否可以通过在 headerClass 中传递一个类来应用样式？还是我需要做一些更高级的事情？

Answer 1

在您的代码中尝试以下 css。您的自定义样式被覆盖的原因是因为 ag-header-cell-label 更接近标题文本，因此由于 css 邻近规则而获得偏好。通过定义如下所示的类，这将仅适用于您在 col 定义中为其定义了自定义 css 类的那些列。

  .ag-theme-custom-text-right .ag-header-cell-label{
   background-color: teal;
   text-align: right;
   padding-right: 10px; // just to make sure that text doesn't go hit itself to next column border
   display: inline-grid;

}
列定义

   { field: 'country',
     headerClass : 'ag-theme-custom-text-right' },
     ....

这是一个 demo我在其中添加了 css 以将国家/地区的标题文本向右对齐。