angular material default style/animation not working after custom theme

Issue

I recently have a problem with my application after I add/edit the theme.css file. Some of angular material style is not applied anymore such as position and animations and background color.

What I have done to the Theme.css file:

The original theme.css

enter image description here

After edit, trying to acheive different theme for different user.

enter image description here
enter image description here

After I have modified the theme, so now I can acheive that the app can change the color base on what class is defined in enviornment.ts file.

in app.component.html
enter image description here

however, problem come after.

  1. all dialog/dropdown/datepicker/popup’s background became transparent, So I define a class and force them to have a white background.

  2. everything inside a dialog become abnormal, as picture shown below, all input/select has no border, and no material animation when click/active on the input field.
    enter image description here

  3. From the picture above, you will see the button has no color style even I have define them.
    enter image description here

  4. however, there is no problem if the input field is not in a dialog, you can see the style and animation is still applied as the picture shown below.
    enter image description here

Anyone have experienced this? I have been trying to solve this problem for 4 days and still no clue about it.? I would be really thankful if someone could help me.

regard

Solution

This problem is because after we adding custom theme class, we have to configure the Overlaycontainer.

This link will help to solve this issue.

https://material.angular.io/guide/theming#multiple-themes

Answered By – Johnathan Li

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.