如何修改getmdl.io框架中mdl FAB按钮的背景颜色？

失效原因 #

• getmdl内置的FAB按钮样式使用了多类组合选择器，优先级高于你自定义的单类名选择器，所以样式被默认覆盖
• 部分版本的getmdl会给FAB的背景色添加!important标记，普通自定义样式无法覆盖
• 自定义样式如果在getmdl的CSS文件之前引入，也会被后加载的框架默认样式覆盖

可行解决方案 #

方案1：提升自定义选择器权重（最推荐） #

给按钮添加自定义类名（示例中使用custom-fab），搭配getmdl自带的FAB类名编写样式，必要时加!important强制覆盖：

/* 自定义样式需要写在getmdl的CSS引入之后 */
.mdl-button.mdl-button--fab.custom-fab {
  background-color: #2196F3 !important;
}
/* 如需修改悬停态背景色，可额外添加以下规则 */
.mdl-button.mdl-button--fab.custom-fab:hover {
  background-color: #1976D2 !important;
}

对应的HTML代码示例：

<button class="mdl-button mdl-js-button mdl-button--fab custom-fab">
  <i class="material-icons">add</i>
</button>

方案2：内联样式（快速调试用） #

临时测试效果可以直接写内联样式，优先级高于所有外部样式：

<button class="mdl-button mdl-js-button mdl-button--fab" style="background-color: #2196F3 !important;">
  <i class="material-icons">add</i>
</button>

调试技巧 #

如果修改后仍然不生效，打开浏览器开发者工具的元素面板，选中FAB按钮查看background-color属性的覆盖标记，确认是哪条框架默认规则覆盖了你的样式，针对性调整自定义选择器的权重即可。

内容的提问来源于stack exchange，提问作者beginnerAlessandro