Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menggayakan Panel pilih tikar Bahan Sudut?

Bagaimana untuk Menggayakan Panel pilih tikar Bahan Sudut?

Mary-Kate Olsen
Lepaskan: 2024-10-26 10:20:03
asal
705 orang telah melayarinya

How to Style the Angular Material mat-select Panel?

Menggayakan Panel pilihan tikar dalam Bahan Sudut

Isu

Apabila menyesuaikan panel komponen mat-select menggunakan panelClass , gaya CSS gagal digunakan walaupun tugasan kelas yang betul dalam templat HTML.

Penyelesaian

Untuk versi Angular 9 dan lebih baharu:

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>
Salin selepas log masuk

Untuk Angular 2.0.0- beta.12 dan versi terdahulu, terdapat beberapa pilihan untuk menggayakan panel:

Pilihan 1: Menggunakan ::ng-deep

Kaedah ini menggunakan ::ng -penggabung dalam untuk menembusi enkapsulasi paparan komponen:

<code class="css">::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}</code>
Salin selepas log masuk

Pilihan 2: Menggunakan ViewEncapsulation

Dengan menetapkan mod enkapsulasi kepada Tiada dalam metadata komponen, gaya CSS tidak lagi terkandung dalam paparan komponen:

<code class="typescript">import {ViewEncapsulation } from '@angular/core';

@Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  </code>
Salin selepas log masuk

Pilihan 3: Tetapkan gaya kelas dalam style.css

Gunakan gaya terus pada .mat-select- kelas kandungan dalam fail style.css luaran, menggunakan !important untuk memaksa aplikasi:

<code class="css"> .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } </code>
Salin selepas log masuk

Pilihan 4: Menggunakan gaya sebaris

Tentukan gaya sebaris terus dalam Templat HTML:

<code class="html"><mat-option style="width:2000px; background-color: red; font-size: 10px;" ...></code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Panel pilih tikar Bahan Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan