[英]Apply styles to specific for angular material components from global css files
I am trying to style specific mat input element in my application through external css file.我正在尝试通过外部 css 文件在我的应用程序中设置特定的 mat 输入元素的样式。
For example I have imported textfield.css file style.css file for styling.例如,我导入了 textfield.css 文件 style.css 文件进行样式设置。
so let me write some code below所以让我在下面写一些代码
<mat-form-field>
<input class="txtfieldwithBordergreen" formControlName="password" matInput type="Password" placeholder="password">
</mat-form-field>
So below is my html file with applied class "txtfieldwithBordergreen"
所以下面是我应用类
"txtfieldwithBordergreen"
html文件
I want to control the properties of any text field by just applying this class where ever required.我想通过在需要的地方应用此类来控制任何文本字段的属性。
so made textfield.css
file and imported in style.css file所以制作了
textfield.css
文件并在 style.css 文件中导入
below is the code for textfield.css
file下面是
textfield.css
文件的代码
.mat-form-field-appearance-legacy .mat-form-field-label {
background-color: green !important;
}
and the textfield.css is included in styles.css并且 textfield.css 包含在 style.css 中
so below is style.css file所以下面是 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;
}
this style will be applied to all matInputs but I want for specific input so I wrote like this这种样式将应用于所有 matInputs 但我想要特定的输入所以我这样写
.txtfieldwithBordergreen .mat-form-field-appearance-legacy .mat-form-field-label {
background-color: green !important;
}
how ever I don't know the above code is not working...when I remove .txtfieldwithBordergreen
Its working fine by applying to all mat inputs.我怎么不知道上面的代码不起作用......当我删除
.txtfieldwithBordergreen
通过应用于所有 mat 输入时它工作正常。
any clues where I am going wrong or any update required here?我哪里出错了或这里需要任何更新的任何线索?
PS I my aim is to build the pre css class like PS我的目标是构建pre css类
textfield-smaller textfield-big etc.. and just need to apply the class name to the mat inputs so that I dont need to go to change in the respective css files. textfield-smaller textfield-big 等等,只需要将类名应用于 mat 输入,这样我就不需要在相应的 css 文件中进行更改。
any help would be highly appreciated..!!任何帮助将不胜感激.. !!
create a separate file called like textfield.css创建一个名为textfield.css的单独文件
import it in your style.css like将它导入你的style.css 中
@import 'globalcss/textfield.scss';
put that file in globalcss folder make that folder under src so将该文件放在 globalcss 文件夹中,使该文件夹位于 src 下
src=>globalcss=>textfield.scss
now you can take any matInput and just add style like small-text-field see the class added below现在您可以使用任何 matInput 并添加类似 small-text-field 的样式,请参阅下面添加的类
<mat-form-field class="small-text-field">
<input matInput placeholder="Username">
</mat-form-field>
and the contents in the textfield.css file goes like textfield.css 文件中的内容如下
.mat-form-field.smallTextfield .mat-form-field-wrapper{
font-size: 10px;
width: 125px;
}
so in whole application wherever you have matInput if you apply this class it will be added but just note that as of now ng::deep is deprecated use the below directive in the ts file as所以在整个应用程序中,无论你有 matInput,如果你应用这个类,它将被添加但请注意,截至目前 ng::deep 已被弃用,请在 ts 文件中使用以下指令作为
encapsulation: ViewEncapsulation.None封装:ViewEncapsulation.None
this will be used inside这将在里面使用
@Component({selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.