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

Question

所以我知道如何使用

更改按钮的颜色

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

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

目前正在将其用于下拉菜单，并且效果很好。只想对 "icon mode".

中的按钮做同样的事情

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

Answer 1

无法组合变体，因此您的选择是：

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

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

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

.greenButton {
  color: green;
}

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

.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 样式变体。我不知道是否有一个漂亮的方法来实现它......从我的脑海中我可以建议一些方法：

第一个：

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

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

第二个：

实施您的自定义图标按钮变体：

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

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

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

How To Change Button Color, But Keep Icon

google-app-maker