css - 如何使用 SCSS 加载两个 ag-grid 主题并在它们之间切换?
问题描述
我试过在我的 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 的重点是我可以覆盖一些主题变量?
解决方案
为了解决这个问题,我最终没有导入他们预先构建的主题,而是创建了自定义主题。创建自定义主题仍然很简单,因为您可以使用默认变量作为基础。
@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 值。我只覆盖了示例所需的那些。
推荐阅读
- python - flask/python 创建多个 TestCase 类返回 404
- python - 在 Python 中创建多级字典词性标注器
- c++ - C++ gcc`floorf`不是`std`的成员?
- django - 安装 SSL 后 Ubuntu 18.04 上的 Django 站点与 Apache2 无法正常工作
- ios - URLSession.dataTask(with:completionHandler:) 是否总是只调用一次completionHandler?
- c# - 从右向左移动时Unity 2D敌人移动脚本不翻转
- php - PHPspreadsheet 仅在 xlsx 时保存“Sheet1”,但在 xls 时可以
- python - Odoo:ValueError:字段 website_published 不存在
- angular - Ionic 3 标记未显示在谷歌地图中
- latex - 如何解决 R-Markdown 中 Latex 的问题?