Namespacing Angular Material Styles

2
votes

I am trying to create reusable components using Angular 1.4.3 and Angular-Material 1.0.5. Idea is that we can integrate these components in different applications.

But the problem that I am facing here is that the Angular material CSS has certain styles applied to generic elements like html,body because of which styles of the consuming app is getting overwritten.

To add more clarity to this, consider an example application A which has its own styles for 'body','html', 'input' tags. This application would include my custom component's CSS and JS to get my reusable component. While doing so, application A loses its own styling. And I cannot do a '!important' on application A's styles as i do not own them.

To fix this issue, I tried namespacing angular material styles as part of my grunt build process. But that didn't really fix the issue and most of my angular material directives doesn't seem to be working.

I tried checking angular material github issues but I don't see a proper solution for this.

https://github.com/angular/material/issues/6369

https://github.com/angular/material/issues/469

Is there a way to properly namespace angular material styles? Please help.

1
javascriptcssangularjsangular-material

1 Answers

0
votes

Not totally sure if I understood correctly, but using !important on you own style should override the ones set by Ng Material.

To take one of the examples you linked to

input {
  font-family: Tahoma !important;
}

But, remember to use !important only when really necessary. Like in this case, when you can't control the styles that you need to override.