ag-grid v.23，使用 ag-theme-material，不允许使 header 透明

Question

我正在使用 ag-theme-material。我迁移到 Angular 9，我不得不将 ag-grid 迁移到 v.23.0.0。但是，某些样式发生了变化，我无法将它们改回来。我遇到的最大问题是网格的 header 行过去是透明的（升级前我使用的是 20.2.0 版）：

.ag-header {
  background-color: transparent;
}

这不再有效了。它将我的 header 行背景设置为白色，而我看不到 header，因为文本是白色的。如果我将它更改为特定颜色，它会起作用，但它不接受透明。我试过将不透明度设置为 0，使用图像，没有任何效果！

所以我在我的 SCSS 文件中添加了一个变量来覆盖这个主题参数，正如他们的迁移指南中所指定的那样 - https://www.ag-grid.com/documentation/javascript/themes-v23-migration/。

$ag-theme-override-params: (
  header-background-color: transparent
);

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat.scss";

但这也不管用。现在，我知道这个变量正在发挥作用，因为我可以使用它覆盖 checkbox-checked-color...

我命名错了吗？我错过了什么？？？

Answer 1

仅供面临相同问题的任何人参考，我已找到它。在版本 23 中，ag-grid 在 .ag-theme-material .ag-root-wrapper（它是 _ag-theme-base-mixin.scss 的一部分）中指定了背景颜色（在变量中），并且它覆盖了 CSS ag-header class。因此，您必须在 .ag-header 和 ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr.

中将背景颜色 CSS 属性设置为透明

ag-grid-angular {
  width: 100%;
  height: 100%;
  .ag-root-wrapper.ag-layout-normal.ag-ltr {
    background-color: transparent;
  }
}

.ag-theme-material .ag-header {
    background-color: transparent;
}

ag-grid v.23，使用 ag-theme-material，不允许使 header 透明

ag-grid v.23, using ag-theme-material, doesn't allow making the header transparent

ag-grid

ag-grid-angular