Цвет фона кнопки углового материала не меняется при применении css

Question 1

Я разрабатываю примерный проект в Angular 13, в котором я использовал тему углового материала. В одном из компонентов я использовал кнопки материалов для диалогового окна подтверждения выхода из системы, и я изменил цвет фона кнопки на белый в css, но когда я запускаю проект, он по-прежнему показывает серый цвет по умолчанию даже после применения css. Есть ли какой-либо способ принудительно изменить цвета углового материала, потому что тот, который я использовал, не работает.

Ниже приведены файлы кода для лучшего понимания

logout-dialog.component.html

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button mat-button class="cancel" (click)="cancel()">Cancel</button> //THIS BUTTON SHOULD HAVE WHITE BACKGROUND
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

выход из системы-dialog.component.css

.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

Изображение

Пожалуйста, какое-нибудь решение ?

Question 2

Попробуйте разместить стиль на своем styles.css файл

Question 3

можете ли вы попробовать с inline-css

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button style="background-color: #fff !important;" mat-button class="cancel" (click)="cancel()">Cancel</button>  //my changes
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

Question 4

Может быть, вы можете попробовать использовать ::ng-deep селектор

::ng-deep button.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

Kibé M.C · Answer 1 · 2021-11-24T09:23:52

0

Попробуйте разместить стиль на своем styles.css файл

Kibé M.C

2021-11-24 09:23:52

Привет, Kibe M. C Я попытался разместить его в style.css, но это не работает

Mohit Kumar Sharma

Попробуйте проверить этот конкретный элемент, нажав ctrl+shift+i в вашем браузере и примените к нему свой CSS.

Kibé M.C

Привет , Кибе М. С, я попытался проверить его, он показывает примененный цвет в css, но не в браузере

Mohit Kumar Sharma

Dako patel · Answer 2 · 2021-11-24T09:29:20

можете ли вы попробовать с inline-css

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button style="background-color: #fff !important;" mat-button class="cancel" (click)="cancel()">Cancel</button>  //my changes
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

Привет, Дако патель, встроенный css применен, но он не работает

Farith Adnan · Answer 3 · 2021-11-25T04:29:37

Может быть, вы можете попробовать использовать ::ng-deep селектор

::ng-deep button.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

Привет, Фарит Аднан, я пытался, но это не сработало, хотя

Цвет фона кнопки углового материала не меняется при применении css

Вопрос

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории