ag-grid v.23，使用 ag-theme-material，不允许使标题透明答案

【问题标题】：ag-grid v.23, using ag-theme-material, doesn't allow making the header transparentag-grid v.23，使用 ag-theme-material，不允许使标题透明
【发布时间】：2021-04-16 20:51:00
【问题描述】：

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

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

这不再起作用了。它将我的标题行背景设置为白色，我看不到标题，因为文本是白色的。如果我将其更改为特定颜色，它可以工作，但它不接受透明。我已经尝试将不透明度设置为 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 ...

我是不是命名错了？我错过了什么？？？

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

仅供遇到同样问题的人参考，我已经找到了。在版本 23 中，ag-grid 在 .ag-theme-material .ag-root-wrapper（它是 _ag-theme-base-mixin.scss 的一部分）中指定了背景颜色（在变量中），它覆盖了 ag-header 类的 CSS。所以你必须在.ag-header 和ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr 中都将 background-color 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;
}

【讨论】：