角形材料组件

Question

I'm attempting to use Material components for angular ( https://blox.src.zone/material#/guides/gettingstarted ) in my Angular 4.3 app. I've installed everything and I added a button to my app.component.html file and the button is rendered and behaves like it should here https://blox.src.zone/material#/directives/button .

I've then tried adding a button in one of my routes and the button isn't rendered the same. It's like the bootstrap css has taken over.

Do I have to import anything in the components that I'm routing to?

Answer 1

There's not near enough information to answer your question. (How do you build your project, where did you put the stylesheets for the material components, do you use webpack, angular cli, rollup, or some other build tool, etc.). But since I can't comment (not enough reputation), I will give it a try.

From your description, it sounds like you added the stylesheets (probably css or scss) to a single app component, via a styleUrls declaration in your @Component metadata. Angular by default encapsulates styles for a component, so in that case your styles only apply to your app component.

For a Blox Material project you typically want to add the material components stylesheets as application wide stylesheet, included in your html via a script tag. When your project is an Angular-CLI project this is the file named in the "styles" field for your app as given in the .angular-cli.json file. This is also what the getting started guide for Blox Material describes, see https://blox.src.zone/material#/guides/gettingstarted .

Alternatively you could put the stylesheet in the root component of your app and/or play with encapsulation: ViewEncapsulation.None in your @Component metadata, to make the styles apply to multiple components at the same time.

If this doesn't help, please provide a bit more information, and try to use your developer tools to see what styles (and by which selectors) get applied to your app component. That will probably give you clues as why they don't get applied to your other components. It will also tell you if other styles (such as for bootstrap, are overriding the material component styles).

Finally check that the Blox Material directives are actually being applied to your buttons: An mdcButton should automatically get at least the mdc-button and mdc-ripple-upgraded style. If you don't see these styles on the button, there is something wrong with how you applied the mdcButton directive.