如何在Onsen UI中覆盖FAB元素的CSS样式？

嘿，我太懂这种样式被框架默认样式压一头的憋屈了！你遇到的核心问题就是CSS优先级冲突——Onsen UI的FAB组件自带的默认样式选择器权重比你当前写的更高，哪怕加了!important都没干过它。这里给你几个亲测有效的解决方案：

1. 用更精准的选择器瞄准FAB内部元素 #

Onsen的FAB组件内部其实有个ons-fab__content的子元素，默认样式大多是挂在这个元素上的。你直接针对它写样式，权重瞬间就上去了：

/* 移除按钮的FAB样式 */
.main-counter-remove.fab ons-fab__content {
  text-align: center;
  font-weight: bold !important;
  color: #d9534f !important;
  /* 加上你要的背景色和边框 */
  background-color: #ffffff !important;
  border: 2px solid #d9534f !important;
}

/* 添加按钮的FAB样式 */
.main-counter-add.fab ons-fab__content {
  text-align: center;
  font-weight: bold !important;
  color: #5cb85c !important;
  background-color: #ffffff !important;
  border: 2px solid #5cb85c !important;
}

2. 用Angular的样式穿透（::ng-deep）破局 #

如果你的样式是写在组件自己的.component.css里，Angular的视图封装会把样式锁在当前组件里，没法渗透到Onsen的FAB组件内部。这时候::ng-deep就能帮你打破这个限制：

::ng-deep .main-counter-remove.fab {
  text-align: center;
  font-weight: bold !important;
  color: #d9534f !important;
  background-color: #ffffff !important;
  border: 2px solid #d9534f !important;
}

::ng-deep .main-counter-add.fab {
  text-align: center;
  font-weight: bold !important;
  color: #5cb85c !important;
  background-color: #ffffff !important;
  border: 2px solid #5cb85c !important;
}

小提醒：虽然::ng-deep已经被Angular标记为过时，但目前在实际项目里还是最常用的穿透方案，暂时不用担心失效~

3. 把样式丢到全局样式文件里 #

如果上面两种都嫌麻烦，直接把自定义FAB样式放到Angular的全局样式文件（比如styles.css）里就行。这样可以绕开组件的视图封装限制，只要你的选择器比Onsen的默认选择器多一个类，权重就能压过它。

另外，你可以在浏览器检查器里看一下Onsen默认样式的选择器是什么（比如可能是.fab--material ons-fab__content），然后你的自定义选择器只要比它多一个类名（比如你自己的.main-counter-remove），哪怕不用!important都能生效。

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