Override Angular Material Component

问题:

I want to override the Angular Material select component (https://material.angular.io/components/select/overview) so that I can change the appearance of the now input-field to an icon button for example. I want to do this because it should somehow work as a dropdown.

I already tried the overriding of the select and the component works very well like this. I saw in this answer: How to override CSS or re-skin for node_module? that I would need to create a new npm package and publish it. But the select is part of the Material package which is inside the @angular package.

So should I fork the whole Material project or can I just create a new package for this one part? But if I have both integrated (Material and my expanded select package) I don't think it would use the overwritten one.

I know that it is not really recommended to do such things and instead use something else which is better maintained. To explain you why I want to do this: We are on a very old version of Angular. We currently use ng2-bootstrap for the dropdown, as Material doesn't offer a dropdown component. But the ngx-bootstrap dropdown is very laggy in its most current version and it is blocking our Angular upgrade. Also we would like to get rid of ngx-bootstrap and just use Material.

回答1:

Use ViewEncapsulation and set None For example:-

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

Any css written in app.component.css will override Angular material css