gpt4 book ai didi

angular - 在 ag-Grid 中自定义 Material 主题不使用复选框的强调色

转载 作者:太空狗 更新时间:2023-10-29 17:36:42 24 4
gpt4 key购买 nike

当我为 ag-Grid 使用标准 Material 主题时,复选框在选中时会获得粉红色强调色。为了使用默认的 Material 主题,我在 styles.scss 中包含了以下内容:

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-material.css";

但是当我想覆盖主题颜色时,我会遵循 ag-Grid site 上的指南.复选框永远不会获得强调色,并且始终为黑色,选中和未选中。

我的 styles.scss 中的代码如下:

$ag-icons-path: '~ag-grid/src/styles/icons/';
$ag-mat-icons-path: '~ag-grid/src/styles/material-icons/';

// Change the primary / accent colors
$primary-color: red;
$accent-color: green;

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-material.scss';

即使我没有设置主色和强调色,复选框仍然是黑色。它应该是粉红色的,因为这是默认颜色。导入.css文件和导入主题的.scss文件似乎有区别。

有人可以帮我吗?或者有没有办法用 ag-Grid 为此创建错误请求?

最佳答案

v21 更新:

ag-grid 的 21+ 版本不再使用 SVG 作为其图标。

来自 https://www.ag-grid.com/javascript-grid-icons/

In v21 of ag-Grid we changed how icons are set in the grid. Previous to v21 the icons were svg files that you could override via the '$icons-path' variable in SASS files. v21 uses a WebFont and CSS for the icons which is the best way to allow icon theming.

这意味着可以通过覆盖颜色属性轻松更改颜色。

例如:

.ag-theme-material .ag-icon-checkbox-checked {
color: mat-color($primary);
}

原答案:

我选择通过在我的 CSS 中创建一个新的 SVG 定义来解决这个问题。我按照此处找到的示例进行操作:https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images#data-uri-3 .

我稍微修改了它们的功能,使其看起来像这样:

@function _buildIcon($icon) {
$icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%3E#{$icon}%3C%2Fsvg%3E';
@return $icon;
}

@function _buildPath($path, $parameters) {
$icon: '%3Cpath%20fill%3D%22#{map-get($parameters, color)}%22%20fill-opacity%3D%22#{map-get($parameters, color-opacity)}%22%20stroke%3D%22#{map-get($parameters, stroke-color)}%22%20stroke-width%3D%22#{map-get($parameters, stroke-width)}%22%20style%3D%22#{map-get($parameters, css)}%22%20d%3D%22#{$path}%22%20%2F%3E';
@return $icon;
}

@function icon(
$icon-name,
$color,
$color-opacity: 1,
$stroke-color: transparent,
$stroke-width: 0,
$css: '' // arbitrary css
){
$parameters: (
'color': $color,
'color-opacity': $color-opacity,
'stroke-color': $stroke-color,
'stroke-width': $stroke-width,
'css': $css
);

$icons: (
checkbox-checked: _buildPath('M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z', $parameters),
checkbox-unchecked: _buildPath('M16 2v14H2V2h14zm0-2H2C.9 0 0 .9 0 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z', $parameters)
);

$icon: _buildIcon(map-get($icons, $icon-name));
@return url("data:image/svg+xml;charset=utf8,#{$icon}");
}

然后为了在我的 SCSS 主题文件中使用它,我执行了以下操作:

.ag-theme-material .ag-icon-checkbox-checked:empty {
$color: mat-color($accent);
background-image: icon(checkbox-checked, 'rgb(' + red($color) + ', ' + green($color) + ', ' + blue($color) + ')');
}
.ag-theme-material .ag-icon-checkbox-unchecked {
$color: mat-color($foreground, icon);
background-image: icon(checkbox-unchecked, 'rgb(' + red($color) + ', ' + green($color) + ', ' + blue($color) + ')', opacity($color));
}

关于angular - 在 ag-Grid 中自定义 Material 主题不使用复选框的强调色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50170947/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com