Блог

Главная - Вопросы по программированию - Применение: изменение цвета фона выбранной кнопки

Применение: изменение цвета фона выбранной кнопки

#angular #sass #primeng

#angular #sass #применение

Вопрос:

Я использую selectButton компонент PrimeNG. 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;
        }
    }

Работает только состояние по умолчанию .

Любая помощь в том, почему состояния выделения и активности не работают?

Ответ №1:

Попробуйте использовать эти классы:

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

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

См. StackBlitz

Комментарии:

1. Спасибо за ваш ответ, это не сработало, я обновил свой вопрос для получения более подробной информации

2. Я не понимаю, что-то не работает в моем стекблите? Вы пытались заменить свои CSS-префиксы .ui- на .p- ?

3. Он работает на StackBlitz, но не тогда, когда я интегрирую его в свой код, это странно..

4. Можете ли вы поделиться изображением своего DOM при проверке selectbutton?

5. Да, спасибо, это был не тот DOM, который я использовал в своем scss. Большое спасибо.

Ответ №2:

Привет, раньше я встречал такую ошибку, как вы, возможно, в вашем проекте есть другой класс, когда он активен. Пример: в 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;
  }

Для меня это работает нормально, вы можете попробовать. Спасибо

Комментарии:

1. Этот вопрос немного устарел, но в любом случае спасибо за ваши усилия