Question

当我使用ag-Grid的标准材质主题时，复选框会在选中时获得粉红色的重音色。要使用默认的Material主题，我在styles.scss中包含以下内容：

signal
  .flatMapError { _ in
    return .empty
  }
  .take(last: 1)
  .observe(observer)

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

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

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

即使我没有设置主色和强调色，复选框也保持黑色。应该是粉红色的，因为这是默认颜色。导入.css文件和导入主题的.scss文件时似乎存在差异。

任何人都可以帮助我吗？或者有没有办法用ag-Grid创建一个bug请求？

Answer 1

我选择通过在CSS中创建一个新的SVG定义来解决此问题。我遵循了以下示例：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images#data-uri-3。

我稍微修改了它们的功能，如下所示：

string

然后在我的SCSS主题文件中使用它，我做了以下工作：

@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}");
}

在ag-Grid中自定义材质主题不会使用重音颜色作为复选框

1 个答案: