css - 如何在 onsen ui 中覆盖 fab 元素 css？

Question

我无法让 onsen fab 元素更改背景颜色或边框。我正在使用 angular 2 和 onsen v2。如果我在浏览器检查器中取消选中 fabs 默认 css，我会看到我的 css 已应用。我已经试过了！重要。

这是我的CSS

.main-counter-remove{
    text-align: center;
    font-weight:bold !important;
    color: #d9534f !important;
}

.main-counter-add{
    text-align: center;
    font-weight:bold !important;
    color: #5cb85c !important;

}

.main-counter-remove.fab{
    border: 2px !important;
    border-color: #d9534f !important;
    background-color: white;
}
.main-counter-add.fab{
    border: 2px !important;
    border-color: #5cb85c !important;
    background-color: white;
}

这是我的html

        <div class="main-counter-remove">
            <ons-fab modifier="mini" (click)="decrementMainCounter()">
                <span>-</span>
            </ons-fab>
        </div>
        <div class="main-counter">
            <p style="padding:5px">10</p>
        </div>
        <div class="main-counter-add">
            <ons-fab modifier="mini" (click)="incrementMainCounter()">
                <span>+</span>
            </ons-fab>
        </div>

Answer 1

fab 类应用于main-content-remove

试试看

.main-counter-remove .fab/* note the space */
{ 
     /* rules here */
}