如何更改按钮颜色，但保持图标

Question

所以我知道如何使用

更改按钮的颜色

.app-Button--Blue {
  color: #0277BD;
}

然而，这只能让我在文本模式下更改按钮的颜色。有没有办法让它改变按钮的颜色？

目前使用此功能进行下拉菜单，效果非常好。只想用“图标模式”中的按钮做同样的事情。

.app-Dropdown--Custom .app-Dropdown-Arrow:after {
  color: green;
  opacity: 1;
}

Answer 1

无法组成变体，因此您可以选择：

1. 为每个特定按钮添加样式，例如

.app-NewPage1-Button1,
.app-NewPage1-Button2 {
  color: green;
}

1. 定义一个类并将其分配给您想要设置样式的每个图标按钮

.greenButton {
  color: green;
}

1. 定义一个新变体，使按钮使用图标字体和 设置颜色：

.app-Button--GreenIcon {
  color: green;
  font-family: "Material Icons Extended";
  font-feature-settings: 'liga';
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  text-transform: lowercase;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  white-space: nowrap;
}

Answer 2

看起来您想要扩展默认的AM样式变体。我不知道是否有一种美妙的方式实现它......从我的头脑中我可以提出一些方法：

<强>首先

1. 将图标按钮变体应用于您想要的所有按钮
2. 编写自定义CSS以为每个按钮实例着色

.app-PageA-ButtonX,
.app-PageB-ButtonY,
.....
{
  color: green;
}

<强>第二

1. 实施自定义图标按钮变体：

.app-Button--CustomIcon {
  color: green;
}

1. 将默认的AM按钮变体添加到按钮样式列表（对于您想要的每个按钮）：