Question

我正在尝试通过外部CSS文件在应用程序中为特定的Mat输入元素设置样式。

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

所以让我在下面写一些代码

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

下面是我的HTML文件，其中包含应用类"txtfieldwithBordergreen"

我想通过仅在需要时应用此类来控制任何文本字段的属性。

制作textfield.css文件并导入style.css文件

下面是textfield.css文件的代码

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

和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时，通过将其应用于所有垫输入，可以正常工作。

我要去哪里的任何线索或需要在此处进行任何更新？

P.S 我的目标是建立像这样的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并仅添加样式（如小文本字段），请参见下面添加的类

    <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})

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

1 个答案: