google-app-maker - 如何更改按钮颜色，但保留图标

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;
}

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

.greenButton {
  color: green;
}

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

.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;
}

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