CODEWITHSUNDEEP
cssangularangular-material
Muhammad Hammad
Muhammad Hammad

Reputation: 87

How to individually style Angular material components?

I am using two Angular material form components inside one component:

<!-- First input -->
<mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Second input -->
<mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput type="text">
</mat-form-field>

Before those input field are focused, they should look this

enter image description here

I need blue color for the first input mat-label when it is focused and label floats at the top left corner.

enter image description here

For second input mat-label, I want black color

enter image description here

Can anyone help me achieve this? Many thanks

Upvotes: 2

Views: 7443

Answers (3)

umutesen
umutesen

Reputation: 2640

If you want to avoid ::ng-deep, you can apply styles in styles.css

  <mat-form-field class="">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
  <br>
  <mat-form-field class="red-float">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

styles.css:

.red-float.mat-focused label{
  color:red !important;
}

Demo

Upvotes: 2

Hardik Patel
Hardik Patel

Reputation: 3959

Try below.

HTML

 <!-- First input -->
<mat-form-field class="first">
    <mat-label>Enter task 1</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Second input -->
<mat-form-field class="second">
    <mat-label>Enter task 1</mat-label>
    <input matInput type="text">
</mat-form-field>

CSS

mat-form-field.mat-focused:first-child mat-label{
  color:rgb(0, 255, 55);
}


mat-form-field.mat-focused:last-child mat-label{
  color:red;
}

Upvotes: 1

Martin Paucot
Martin Paucot

Reputation: 1251

You can use the directive ::ng-deep in CSS to style child component.

But in your context the input is part of your component so you can select it with mat-form-field input[matInput] {}

Upvotes: 1

Related Questions