How to replace Angular Material Styles on own?

问题

I try to changes CSS styles in style.css of components file like this:

.mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

But it does not repalce Angular Material styles. Any custom style can not overwrite Angular Material styles.

回答1:

You can achieve that by adding /deep/ before the css class:

/deep/ .mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

>>> .mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

UPDATE:

/deep/ and >>> will be depreciated soon. So use the new ::ng-deep (Details Here)

::ng-deep .mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

::ng-deep .mat-tab-label-active {
    border-radius: 3px;
    background: black;
    opacity: 1;
    color: #ffffff;
    box-shadow: 0 -1px 5px 0 rgba(62, 78, 184, 0.2), 0 -3px 4px 0 rgba(62, 78, 184, 0.12), 0 -2px 4px 0 rgba(62, 78, 184, 0.14);
}

回答2:

You can't change Angular Material styles because of the specific order of styles in your html. Thus, Angular puts your style.css first, before any Angular components' styles (including Angular Material). Hence, there are few ways to design Angular Material components:

Use the !important tag in your stylesheet.
Create a new component which inherits the angular-material component with a new @Component decorator to define new styles (in this case, you don't import the Angular Material component module at all).

Change the order of styles in your html. You can either manually put your custom Angular Material styles after the <body> tag or reconfigure WebPack to include your styles.css after the <body> tag.

As for the third option, to reconfigure WebPack:

a. Add ngx-build-plus: ng add ngx-build-plus

b. create a file ng-plugin.ts:

export default {
  pre() {
  },
  config(cfg) {
    const util = require('util');
    for (const rule of cfg.module.rules) {
      if ('include' in rule && rule.use[0] === 'style-loader') {
        rule.use[0] = { loader: 'style-loader', options: { insertInto: 'body' } };
      };
    }
    return cfg;
  },
  post() {
  }
};

c. Compile the file: tsc ng-plugin.ts

d. Add to angular.json

"serve": {
  ...
  "options": {
    ...
    "plugin": "~ng-plugin"
  }
}

PS: Unfortunately it only works in the development configuration, and I don't now how to setup the production configuration accordingly. So, in the production, I have to put the line <link rel="stylesheet" href="styles.2c8b1779b4d75bca36df.css"> after the <body> tag manually.

回答3:

Encapsulated styles (the default for a component) will affect direct children of a component, but since .mat-tab-label is a child of the tab component, your styles cannot affect it.

You should do one of the following:

Turn off encapsulation on your component: encapsulation: ViewEncapsulation.None
Add overriding styles to a global stylesheet .my-tabs .mat-tab-label { }
Use deprecating shadow piercing in your component stylesheet such as & ::ng-deep .mat-tab-label { }

Also, material component styles are loaded when the component is instantiated and will often come after your overriding styles, thus taking precedence. Be sure to make your selector a little more specific.

来源：https://stackoverflow.com/questions/45439952/how-to-replace-angular-material-styles-on-own

标签

angular

material-design

angular-material2