Kolor tła przycisku kątowego materiału nie zmienia się przy użyciu css

Question 1

Zajmuję się tworzeniem przykładowy projekt w Angular 13, w którym użyłem temat kątowego materiału. W jednym z elementów użyłem przycisku materiałów do okna dialogowego potwierdzenia wylogowania się z systemu, i zmieniłem kolor tła przycisku na biały w css, ale gdy uruchamiam projekt, on nadal pokazuje szary kolor domyślny, nawet po zastosowaniu css. Czy jest jakiś sposób wymusić zmianę koloru kątowego materiału, bo ten który użyłem, nie działa.

Poniżej znajdują się pliki kodu dla lepszego zrozumienia

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>

wyjście z systemu-dialog.component.css

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

Obraz

Proszę o jakieś rozwiązanie ?

Question 2

Spróbuj umieścić styl na swoim styles.css plik

Question 3

czy można spróbować z 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

Może być, można spróbować użyć ::ng-deep wybierak

::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

Spróbuj umieścić styl na swoim styles.css plik

Kibé M.C

2021-11-24 09:23:52

Witam, Kibe M. C próbowałem umieścić go w style.css, ale to nie działa

Mohit Kumar Sharma

Spróbuj sprawdzić ten konkretny element, naciskając ctrl+shift+i w przeglądarce i zastosuj się do niego swój CSS.

Kibé M.C

Witam , Кибе M. Z, próbowałem to sprawdzić, to pokazuje, zastosowany kolor w css, ale nie w przeglądarce

Mohit Kumar Sharma

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

czy można spróbować z 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>

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

Może być, można spróbować użyć ::ng-deep wybierak

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

Witam, Фарит Adnan, próbowałem, ale to nie zadziałało, choć

Kolor tła przycisku kątowego materiału nie zmienia się przy użyciu css

Pytanie

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii