Angular Material adding the primary color to a Div

Question

I am using Angular Material 2 and I am trying to add the primary color to a div.

This is what I've done:

<div class="myDiv background-primary-color white-text">This is a Div</div>

The problem I'm having is that It's adding no color to it.

Adding the classnames won't do anything. You need to add corresponding css to apply those styles. — Will Howell, Oct 16 '17 at 17:36
Angular Material doesn't provide generic classes for behavior like that. Check out https://material.angular.io/guide/theming-your-components — Will Howell, Oct 16 '17 at 22:01

score 6 · Accepted Answer · answered Oct 17 '17 at 14:23

6

There is no way to use color attribute on non-material elements (and not all Angular Material elements support it). But you can follow a little hacky way: import a palette and store the color to the variable in SASS/LESS, so when you will change the current palette - this color will be changed too. Here is an awesome explanation step by step: https://stackoverflow.com/a/46760925/6053654

answered Oct 17 '17 at 14:23

P.S.

15,970
14
62
86

4

Oh cool, casually browsing and seeing a work around I posted being reposted for others :D Hope It helps OP – Cacoon Feb 16 '18 at 05:28

Angular Material adding the primary color to a Div

1 Answers1