Importing Angular Material Themes

Question

I am building a new component and would like to use Angular Material themes. I imported the themes from Angular Material repository but the mixins are not getting applies to the control. If I add any style in the the stylesheet it gets applied but the mixing are not applied to the controls. Can you please let me know what I might be missing here. This is what I have implemented:

a) Created a custom control in the project b) used the theme.scss file from Angular Material and imported it in the component.scss

Answer 1

You have to

1. rename your styles.css to styles.scss
2. put the import of the theme.scss into your styles.scss
3. adjust the entry in your angluar.json from styles.css to styles.scss

then run ng serve

Answer 2

If you want to use a built-in theme, then you need to add your chosen CSS file to the styles array of your project's angular.json file.