Question

如何为未选中的<mat-chip>One fish</mat-chip>设置白色背景和灰色边框？

修改主要和次要调色板只会影响所选芯片：

<mat-chip color="primary" selected>Primary fish</mat-chip>
<mat-chip color="accent" selected>Accent fish</mat-chip>

我只能通过CSS影响未选定的垫片：

::ng-deep .mat-chip.mat-standard-chip {
  background: white;
  color: $charcoal;
  border: 1px solid #B7B8BB;
  border-radius: 16px;
  font-family: Roboto-Regular;
  margin-right: 8px;
  padding: 7px 16px;
  text-align: center;
  text-transform: lowercase;
  outline: none;
}

有更好的方法吗？

Answer 1

在根CSS“ styles.css”中设置组件样式。不要使用 :: ng-deep ，因为它已被弃用！！

Answer 2

您可以使用 material/theming 中的 mat-light-theme 函数构建主题。然后，你可以这样做：

$bg: map-get($yourTheme, background);

您会在 $bg 中获得一张地图。

然后，您需要将未选择筹码的新样式合并与此 $bg 地图。你可以这样做：

$yourNewColor: #fefefe; // or map-get($anotherMapWithColors, 600)
$bg: map-merge($bg, (unselected-chip: $yourNewColor));
$chip-theme: map-merge($yourTheme, (background: $bg));

您的筹码主题地图已准备就绪。然后，您可以使用以下方法创建筹码主题：

// from styles.scss
@include theming.mat-chips-theme(light-theming.$wkc-chips-theme);

主题芯片如何？

2 个答案: