After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps?
When using normal CSS (without a framework), we typically include the following in styles.css:
@import “~@angular/material/prebuilt-themes/indigo-pink.css”;
I assumed Angular would handle this automatically now that the CSS theme is included in angular.json. However, I'm not seeing the styles applied as expected. The stepper component, for example, does not reflect the chosen theme. Here's a screenshot for reference:
https://i.sstatic.net/wztDp.png
I attempted adding the code snippet below to styles.scss, but the issue persists:
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
Update
Upon creating a new project and implementing the minimal setup mentioned above with the same selections, the theme application worked correctly. It seems I may have overlooked a detail in my initial implementation. I'll keep this post available in case others encounter a similar hurdle.