Css uygulamasında Açısal Malzeme Düğmesi arka plan rengi değişmiyor

Question 1

Açısal Malzeme temasını kullandığım Açısal 13'te örnek bir proje geliştiriyorum. Bileşenlerden çıkış onay iletişim penceresi için malzeme düğmelerini kullandım ve css'de düğme arka plan rengini beyaz olarak değiştirdim, ancak projeyi çalıştırdığımda css'yi uyguladıktan sonra bile varsayılan gri rengi gösteriyor. Açısal malzeme renklerini değiştirmeye zorlamak için herhangi bir yol var mı, çünkü kullandığım renk çalışmıyor.

Aşağıda daha iyi anlaşılması için kod dosyaları verilmiştir

çıkış-iletişim kutusu.bileşen.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>

çıkış-iletişim kutusu.bileşen.css

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

Görüntü

Herhangi bir çözüm lütfen ?

Question 2

Stili kendi stilinize yerleştirmeyi deneyin. styles.css dosya

Question 3

deneyebilir misin 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

Belki kullanmayı deneyebilirsiniz ::ng-deep seçici

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

Stili kendi stilinize yerleştirmeyi deneyin. styles.css dosya

Kibé M.C

2021-11-24 09:23:52

Merhaba Kibe M. C. Onu şık bir şekilde yerleştirmeyi denedim.css ama çalışmıyor

Mohit Kumar Sharma

Tuşuna basarak o öğeyi denetlemeyi deneyin ctrl+shift+i tarayıcınızda ve css'nizi üzerine uygulayarak.

Kibé M.C

Merhaba Kibé M. C, incelemeyi denedim, uygulanan rengi css'de gösteriyor ancak tarayıcıda göstermiyor

Mohit Kumar Sharma

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

deneyebilir misin 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>

Merhaba Dako patel satır içi css uygulandı ancak çalışmıyor

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

Belki kullanmayı deneyebilirsiniz ::ng-deep seçici

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

Css uygulamasında Açısal Malzeme Düğmesi arka plan rengi değişmiyor

Soru

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride