将样式应用于特定于全局 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})