PrimeNG：更改所选按钮的背景颜色

Question

我正在使用 PrimeNG selectButton 组件。 https://www.primefaces.org/primeng/showcase/#/selectbutton。我找不到将所选按钮的蓝色背景颜色更改为其他颜色的方法。

这是我的html代码

<p-selectButton [options]="brands" multiple="multiple" >
                    <ng-template let-car let-i="index" pTemplate="item">
                        <div class="brand-image-container">
                            <img id="{{car.value}}" src="./assets/images/png/brand-logos//{{car.label}}.png">
                        </div>
                    </ng-template>
                </p-selectButton>

这是我的 scss:

::ng-deep {
  .ui-selectbutton .ui-button.ui-state-default {
    border-radius: 20px;
    border: solid 0 transparent;
    background-color: transparent;
    margin-right: 10px;
  }
}

::ng-deep {
   .ui-selectbutton .ui-button.ui-state-active {
        background-color: red;
    }
}
::ng-deep {
       .ui-selectbutton .ui-button.ui-state-highlight {
            background-color: green;
        }
    }

只有默认状态有效。

关于为什么 highlight 和 active states 不起作用的任何帮助？

Answer 1

试试这些类:

::ng-deep {
  .p-selectbutton .p-button.p-highlight {
    background: red;
    background-color: red;
  }

  .p-selectbutton .p-button.p-highlight:hover {
    background: green;
  }
}

见StackBlitz

Answer 2

您好，我曾经遇到过像您这样的错误，它可能在您的项目中有不同的 class 激活时。示例：在 stackBlitz 中它将 ->

    ::ng-deep .p-selectbutton .p-button.p-highlight {
    color: #007ad9 !important;
    font-weight: 700;
  }

但在我的项目中它会 ->

    ::ng-deep .ui-selectbutton .ui-button.ui-state-active {
    color: #007ad9 !important;
    font-weight: 700;
  }

对我来说效果很好，你可以试试。谢谢

PrimeNG：更改所选按钮的背景颜色

PrimeNG: Change the background color of selected button

sass

primeng

angular