What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

Question

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field:

<mat-form-field class="form-control-full-width">
    <input type="text" matInput placeholder="First Name"  formControlName="firstNameFC" required>            
    <mat-error *ngIf="hasNewUserError('firstNameFC', 'required') && isNewUserSubmitted">
               First Name is required
    </mat-error>
</mat-form-field>

I have applied the following CSS to style it:

 .mat-form-field-label {
    /*change color of label*/
    color: white !important;
  }

  .mat-form-field-underline {
    /*change color of underline*/
    background-color: white !important;
  } 

  .mat-form-field-ripple {
   /*change color of underline when focused*/
    background-color: white !important;;
  }

  .mat-input-element{
    color: white !important;
  }

The CSS is working as expected for this page. However, I now have another mat-form-field on a different page and I want to apply different CSS (color: green, background-color: white) to that field.

Is it possible to apply different CSS styles to controls on different pages?

html css angular angular-material mat-form-field

Answer 1

Answer №1

Absolutely! You have the ability to include them in every component's css file just as shown below:

:host ::ng-deep .mat-form-field-label {
    color: white;
}

Answer 2

Absolutely! You have the ability to include them in every component's css file just as shown below:

:host ::ng-deep .mat-form-field-label {
    color: white;
}

Answer 3

Answer №2

A solution is possible by creating a separate file named textfield.css

Include it in your main style.css like this:

@import 'globalcss/textfield.scss';

Store the file in a folder named globalcss under the src directory, so it should be located at src=>globalcss=>textfield.scss

You can now style any matInput by adding the class "small-text-field" as shown below:

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

The CSS contents in the textfield.css file would look something like this:

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

Throughout your application, applying this class to matInput elements will add the specified styles. Note that ng::deep is deprecated, so use the following directive in the typescript file instead:

encapsulation: ViewEncapsulation.None

This directive will need to be included within the @Component decorator of the respective component.

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

Hopefully, this explanation provides a clearer and more precise understanding!

Answer 4

A solution is possible by creating a separate file named textfield.css

Include it in your main style.css like this:

@import 'globalcss/textfield.scss';

Store the file in a folder named globalcss under the src directory, so it should be located at src=>globalcss=>textfield.scss

You can now style any matInput by adding the class "small-text-field" as shown below:

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

The CSS contents in the textfield.css file would look something like this:

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

Throughout your application, applying this class to matInput elements will add the specified styles. Note that ng::deep is deprecated, so use the following directive in the typescript file instead:

encapsulation: ViewEncapsulation.None

This directive will need to be included within the @Component decorator of the respective component.

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

Hopefully, this explanation provides a clearer and more precise understanding!

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

Answer №1

Answer №2

Similar questions

What is the method for copying table data, including input text as cells, to the clipboard without using jQuery?

Animating elements on a webpage can be achieved by using both

Positioning a list item on the left side within Chrome by using the

Attempting to align a CSS card flip within a Bootstrap layout

Arranging divs with Bootstrap version 4

Angular 2 decorators grant access to private class members

Is file timestamp utilized by Apache to verify if a resource has been changed?

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

Give a CSS Element a specific class

Tips for correctly cloning a table row:

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Bx slider - displaying partially hidden slides at the far right while utilizing a full-width carousel

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Angular 2 - The magic of the @Injectable() decorator

Notification of failed fetch in backbone

What steps are needed to enable the keyboard on a Otree application for mobile devices?

Tips for looping through a table and opening the tab that meets a specific criterion

Issue encountered: Exceeded maximum call stack size while running npm start command for Angular

rxjs in Angular2 is missing the observable.interval function

Passing a click event to a reusable component in Angular 2 for enhanced functionality