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

Find the item in the pop-up window

Is it possible to extract a div from a third-party domain and showcase it on my website?

What exactly is the role of the @altfontfamily variable in Bootstrap?

Do colors appear differently on various screens?

Using Angular 2+, learn how to effectively utilize and monitor the output emitter when utilizing the createComponent factory method

What is the best way to target the specific DIV using a jQuery selector?

Dynamically pass a template to a child component

Can two BootstrapVue tooltips be displayed on a single element with different target settings?

Ensuring DIV Fills without Compromising Aspect Ratio

AngularJS mdDialog not supporting Tinymce functionality

Seamless changes with graceful fades while transitioning between classes

Click to Rotate the Shape

Optimal approach for vertically aligning elements in CSS

Elevating font-awesome from version 4.7 to 5.11.1 in an Angular 6 project

The `appendTo` function in Ajax is used to swap out the current element

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

What is the best way to toggle a card within a collection of cards using Angular?

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

What is causing justifyContent: space-between not to function properly?

Tips for dynamically setting up an inputStream in a Java <audio> tag within an HTML5 environment