如何使用 SCSS 加载两个 ag-grid 主题并在它们之间切换？

Question

我试过在我的 main.scss 中使用

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';
@import '~ag-grid-community/src/styles/ag-theme-balham-dark/sass/ag-theme-balham-dark';

然后有条件地，我想将ag-theme-balham或应用ag-theme-balham-dark到包含 ag-grid 的 div。

但是，如果两个主题都是通过 scss 加载的，因为它们都建立在一些带有变量的公共主题文件上，似乎一个覆盖了另一个？即使我可以通过 chrome 检查器验证周围的 div 有class="ag-theme-balham-dark"（即使最后导入的是暗色），我的网格也会亮起来。

首先成功删除浅色主题的导入会产生一个暗网格。

如果我切换到使用 ag-grid 的 CSS 而不是 SCSS 确实有效，但 SCSS 的全部意义在于我可以覆盖一些主题变量？

Answer 1

为了解决这个问题，我最终没有导入他们的预构建主题，而是创建了自定义主题。创建自定义主题仍然很简单，因为您可以使用默认变量作为基础。

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-balham/vars/ag-theme-balham-vars';
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-common';

.ag-theme-balham {
  // $ag-params contains all values for the light theme
  @include ag-theme-balham($ag-params);
}

.ag-theme-balham-dark {
  $background: #2d3436;
  $foreground: #F5F5F5;

  // override the default params with the dark values
  $dark-params: map-merge($ag-params, (
      background-color: $background,
      foreground-color: $foreground,
      secondary-foreground-color: $foreground,
      odd-row-background-color: darken($background, 3),
      header-background-color: darken(#636e72, 30),
      header-foreground-color: $foreground,
      header-cell-hover-background-color: lighten($background, 5),
      header-cell-moving-background-color: lighten($background, 5),
      border-color: #424242,
      hover-color: lighten($background, 7)
    ));

    @include ag-theme-balham($dark-params);
}

https://stackblitz.com/edit/ag-grid-scss-themes?embed=1&file=src/styles.scss

根据您在 ag-grid 中使用的功能，您可能需要覆盖更多 $ag-params 值。我只覆盖了示例所需的那些。