Apply styles to specific for angular material components from global css files

Question

I am trying to style specific mat input element in my application through external css file.

For example I have imported textfield.css file style.css file for styling.

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"

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

below is the code for textfield.css file

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

and the textfield.css is included in styles.css

so below is style.css file

@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

.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.

any clues where I am going wrong or any update required here?

PS I my aim is to build the pre css class like

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.

any help would be highly appreciated..!!

Answer 1

create a separate file called like textfield.css

import it in your style.css like

@import 'globalcss/textfield.scss';

put that file in globalcss folder make that folder under src so

src=>globalcss=>textfield.scss

now you can take any matInput and just add style like small-text-field see the class added below

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

and the contents in the textfield.css file goes like

.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

encapsulation: ViewEncapsulation.None

this will be used inside

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