CODEWITHSUNDEEP
angularsassangular-material
Jeffrey
Jeffrey

Reputation: 185

Do I need a custom mixin for every Angular component that wants to use settings from the active Material theme?

The questions I'm trying to answer:

  1. Do we need to add mixins for every one of our components to wire up to an Angular Material theme and include?
  2. If so, how should we structure our folder? Put the theme scss file alongside the components scss file? Or in a separate "mixins" folder
  3. Is there a better way?

The Angular Material documentation has an example about how to theme your own custom component: https://material.angular.io/guide/theming-your-components

Do we need to do this for EVERY component that wants to read a theme value?

For instance, our header needs the accent 200 color, so this means we take our header components scss file, mostly duplicate it and turn it into a mixin (per the Material documentation).

Then we have to include this components mixin in the application (see step #4: https://material.angular.io/guide/theming-your-components#step-4-include-the-theme-mixin-in-your-application).

This feels like a lot of overhead to just grab a single color value. I've seen people read Material theme values and then assign them to CSS variables under root and then they can access those colors component stylesheets, but that feels hacky.

Upvotes: 0

Views: 396

Answers (1)

Mohsen HZ
Mohsen HZ

Reputation: 29

there is no need to change your theme for every component. its good to define your custom theme on a file then use it in the style.scss

Upvotes: 0

Related Questions