问题
We are rebuilding our web application and have chosen to use Angular as frontend framework and Google Material as main style concept because it is simple and popular.
Most of our pages will be part of Angular application but some will be not. We want to use the same classes/styles and theme at any page of our application and avoid code duplication.
The main question is: how to use Material Design classes from Angular Material toolkit on pages without Angular? We've not found complete Angular Material CSS documentation to simply attach CSS link with library and our theme to "static" page.
Thanks!
回答1:
There is no documentation on
Using Angular Material classes outside Angular pages
because Angular Material is not intended to be consumed/used as a style/script 'toolkit'. It is a component library for the Angular application framework platform. It is implemented by using custom components, directives, etc. and not by applying classes to standard HTML.
For example, an Angular Material form field is not created with:
<div class="mat-form-field">...</div>
it is created with:
<mat-form-field>...</mat-form-field>
which of course won't work outside Angular.
That being said, style is style, CSS is CSS, and it can be applied to anything as long as it is imported into the page. So <div class="mat-form-field">...</div> will probably do something, but it is unlikely that it will do what you might want it to do - results will vary widely. The main point is that class="mat-form-field" is not designed to work other than when produced by using <mat-form-field>. Ditto for all of the rest of library (there might be a few exceptions to this for specific features with certain components - not sure - but the component documentation would note this).
Officially documenting how to do something requires that it be designed and supported for that use. That obviously isn't the case here, so that's why there isn't any official documentation.
An exception to this is Angular Material's typography classes which can be used as classes for regular HTML, and accordingly is documented.
来源：https://stackoverflow.com/questions/54438158/using-angular-material-classes-outside-angular-pages