How to Overwrite Angular 2 Material Styles

How to overwrite angular 2 material styles?

I think classes should work, but you may need to use /deep/ because of the view encapsulation.

Try this:

/deep/ md-select.your-class {
  background-color: blue;
}

You can also play with theming.

How to override material CSS styles?

You do it in your global style sheet (style.scss), or in any style sheet that is not encapsulated.

To override, take the selector by inspecting the HTML element in your browser, and override the property you want.

If it still fails, you can use !important to force the style to be applied.

Remember to order your style sheet imports in your angular.json file too (thank you @SurenSrapyan for reminding me)

Override Angular Material style in Angular component

As @Dylan pointed out, you have to use /deep/ to alter the CSS within the child compoenets. Here is the answer I was looking for:

:host /deep/ md-input-container .mat-input-wrapper

Angular material overwrite style.css

I would suggest to create a separate .scss file reserved for styling globaly Angular Material elements, and importing it in the main styles.scss file.
Answering your question - propably you're not 'specific' enough. First of all it would be nice to add an additional custom class to your Material element so the custom styles will be applied only when this class is present. Example on styling

.mat-table.my-custom-class {
   width: 100%;

   .mat-cell {
     font-size: 20px;
     padding: 20px;
   }
}

You might nest the elements event more for higher css specificity

Override Angular Material CSS differently in different components

Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)

Note: ViewEncapsulation is none here.

component.html

<div class="my-component__container">
    <!-- other elements(material) are here -->
</div>

component.scss

.my-component__container{
    // override material styles here
    .mat-form-field{...}
}

Solution 2: use /deep/(deprecated).(use ::ng-depp insteaded)

:host /deep/ .mat-form-field {
  text-align: left !important;
}

Solution 3: don't change ViewEncapsulation , then:

:host {
  .my-component__container{}
}

Overwrite angular material css -- Why does !important work

The MDN Web Docs has a great explanation of CSS specificity and the role of !important in overriding the cascade. Keep in mind that id="" is more specific than class="".

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

From the docs:

Some rules of thumb:

Always look for a way to use specificity before even considering !important

Only use !important on page-specific CSS that overrides foreign CSS

Never use !important on site-wide CSS.

Instead of using !important, consider:

Make better use of the CSS cascade, Use more specific rules.

Indicate one or more elements before the element you're selecting,
the rule becomes more specific and gets higher priority.

IMHO your use of !important here is valid as you are overriding "external" css.

As for styling Angular Material Components, when you set up your project you are using either a pre-built or custom theme. If you have lots of customizations to make, a custom theme is the way to go.

Angular Material Theming

Angular overriding angular material, for 3 different components. Having similar material

try to add your own classes to the material component and override the material classes by your own class

for example

<mat-form-field class="custom-form-field"></mat-form-field>

and in styles.css file

.custom-form-field {
  // your styles
}

.custom-form-field .mat-input-element {
  // your styles for the inner material(html) elements
}

How to override Angular material styles with global styles.css while avoiding !important?

It is a specificity problem. You can modify the mat-icon class directly, use id which has higher specificity or use combined selector like

.icon-group > .icon

---

Related Topics