將樣式應用於特定於全局 css 文件的角度材料組件

Question

我正在嘗試通過外部 css 文件在我的應用程序中設置特定的 mat 輸入元素的樣式。

例如，我導入了 textfield.css 文件 style.css 文件進行樣式設置。

所以讓我在下面寫一些代碼

 <mat-form-field>
                <input class="txtfieldwithBordergreen" formControlName="password" matInput type="Password" placeholder="password">
             
              </mat-form-field>

所以下面是我應用類"txtfieldwithBordergreen" html文件

我想通過在需要的地方應用此類來控制任何文本字段的屬性。

所以制作了textfield.css文件並在 style.css 文件中導入

下面是textfield.css文件的代碼

.mat-form-field-appearance-legacy .mat-form-field-label {
    background-color: green !important;
}

並且 textfield.css 包含在 style.css 中

所以下面是 style.css 文件

@import 'globalcss/textfield.css';

html, body { height: 100%; padding: 0; margin: 0; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }


:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
}

這種樣式將應用於所有 matInputs 但我想要特定的輸入所以我這樣寫

.txtfieldwithBordergreen .mat-form-field-appearance-legacy .mat-form-field-label {
        background-color: green !important;
    }

我怎么不知道上面的代碼不起作用......當我刪除.txtfieldwithBordergreen通過應用於所有 mat 輸入時它工作正常。

我哪里出錯了或這里需要任何更新的任何線索？

PS我的目標是構建pre css類

textfield-smaller textfield-big 等等，只需要將類名應用於 mat 輸入，這樣我就不需要在相應的 css 文件中進行更改。

任何幫助將不勝感激.. !!

Answer 1

創建一個名為textfield.css的單獨文件

將它導入你的style.css 中

@import 'globalcss/textfield.scss';

將該文件放在 globalcss 文件夾中，使該文件夾位於 src 下

src=>globalcss=>textfield.scss

現在您可以使用任何 matInput 並添加類似 small-text-field 的樣式，請參閱下面添加的類

    <mat-form-field class="small-text-field"> 
               <input matInput placeholder="Username">
            </mat-form-field>

textfield.css 文件中的內容如下

.mat-form-field.smallTextfield .mat-form-field-wrapper{
    font-size: 10px;
    width: 125px;
}

所以在整個應用程序中，無論你有 matInput，如果你應用這個類，它將被添加但請注意，截至目前 ng::deep 已被棄用，請在 ts 文件中使用以下指令作為

封裝：ViewEncapsulation.None

這將在里面使用

@Component({selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None})