设计所有 paper-fab[icon="add"] 图标的背景

Question

我正在尝试在我的页面上设置所有纸质工厂添加图标的样式：

<paper-fab icon="add" mini></paper-fab>

默认样式为：

但我希望 paper fab 图标将默认强调色作为背景色：

我可以用以下方法来做这个造型：

<style is="custom-style">
  :root {
    --paper-fab-background: var(--accent-color);
  }
</style>

但是我会更改所有 paper fab 图标的背景颜色，我只想更改 paper-fab[icon="add"] 图标的背景颜色。有什么想法吗？

Answer 1

只需将此添加到您的 style[is=custom-style]。

html /deep/ paper-fab[icon="add"] {
  background: green; /* or whatever your color is */
}

自定义 CSS 属性仍然是 CSS 可以应用于该元素的属性，如果该元素支持的话。

Styling the background of all the paper-fab[icon="add"] icons