如何更改复选框颜色？AG网格

Question

尝试更改复选框颜色（由于更改强调色）会导致黑色复选框。

所以我安装了node-sass并成功地更改了各种其他样式，例如，行的悬停颜色$hover-color: cornsilk;

但不知何故使用： $accent-color: #fffff1;或$ag-mat-accent: #fffff1; 只会将其从默认的粉红色更改为黑色。

$ag-icons-path: "~ag-grid-community/src/styles/ag-theme-material/icons/";

$accent-color: #fffff1;
$icon-color: #03a9f4;
$hover-color: cornsilk;

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material.scss";

选中后，我的预期结果将是一个白色的复选框。相反，无论我选择什么颜色，我都会得到一件黑色的。

Answer 1

将以下 CSS 添加到您的 style.scss 文件中：

.ag-theme-material .ag-checkbox-input-wrapper.ag-checked::after {
  color: #fffff1 !important;
}

Answer 2

您可以尝试在 scss 中设置以下变量。我希望这能帮到您！

@import '~ag-grid-community/src/styles/ag-grid';

// set the colors to the ones from the material theme
$ag-mat-accent: #fffff1;

// Import the ag-Grid material-next theme
@import '~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material';

我的示例的来源可以在这里找到： https: //github.com/ag-grid/ag-grid-material/blob/master/angular-material/src/styles.scss#L22-L23