สี่เหลี่ยมเนื้อหาปุ่มสีพื้นหลังไม่เปลี่ยนบนกำลังปรับใช้ css

Question 1

ฉันกำลังพัฒนาตัวอย่างการทำงานของโครงการในสี่เหลี่ยมอายุ 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>

ออกจากระบบ comment-กล่องโต้ตอบส่วนประกอบ.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 ฉันพยายามยืนยันว่ามันอยู่ในสไตล์วิคทอเรียหรอกcss แต่ไม่ได้ผล

Mohit Kumar Sharma

พยายาม inspecting ที่พิเศษธาตุจากการกด ctrl+shift+i ในของเบราว์เซอร์แล้วและกำลังปรับใช้ CSS ของคุณอยู่

Kibé M.C

สวัสดี Kibé เอ็มซีฉันพยายาม inspecting มัน,มันจะก่อให้เกิดความสมัครของสีใน 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>

สวัสดี Dako พาเท็ลออกย่อในบรรทัดเอกสารของ 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;
}

สวัสดี Farith Adnan ฉันพยายามแต่มันไม่ได้ทำงานถึงแม้ว่า

สี่เหลี่ยมเนื้อหาปุ่มสีพื้นหลังไม่เปลี่ยนบนกำลังปรับใช้ css

คำถาม

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่