将样式应用于全局css文件中角度材质组件的特定样式

我试图通过外部css文件在我的应用程序中设置特定的mat输入元素的样式

例如，我导入了textfield.css文件style.css文件进行样式设置

让我在下面写一些代码

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

而textfield.css包含在styles.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;
}

这种风格将应用于所有的MatInput，但我需要特定的输入，所以我这样写

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

无论如何，我不知道上述代码不起作用……当我删除

.txtfieldwithBordergreen

时，通过应用于所有mat输入，其工作正常

我哪里出错了，有什么线索吗？这里需要更新吗

附言 我的目标是像这样构建css前类

文本字段较小 文本字段大等等。。只需要将类名应用于mat输入，这样我就不需要在相应的css文件中进行更改

---

任何帮助都将不胜感激

创建一个名为liketextfield.css的单独文件

将其导入您的样式.css中

@import 'globalcss/textfield.scss';

将该文件放在globalcss文件夹中，使该文件夹位于src so下

src=>globalcss=>textfield.scss

现在，您可以使用任何matInput，只需添加类似于小文本字段的样式，请参见下面添加的类

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

因此，在整个应用程序中，无论您在哪里有matInput，如果您应用这个类，它都将被添加，但请注意，现在ng:：deep已被弃用，请在ts文件中使用以下指令作为

封装：视图封装。无

这将在内部使用

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

---

最好的方法是打开你的开发工具，找到你想要改变的元素。然后，您可以从开发工具中找出产生当前样式的规则。一旦知道了这一点，您就可以知道如何将类注入到混合中。如果原始样式是由.mat-form.mat-form-field.mat-form-field-label生成的，则可以使用.my-green将类添加到字段中，并将css添加到.mat-form-field.my-green.mat-form-field-label中。请记住，空格表示父->子元素，而没有空格表示同一元素上的两个类别。我将检查并让您知道。感谢您的明确指导。嘿，谢谢，它起作用了。。！！。

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

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