1

Scenario:

  • I have an application which was using Angular 2 and Angular Material.
  • I updated the project to Angular 7 and latest Material version using update guide and ng update.

Problem:

  • The problem is I was relying on some of the CSS the old Material theme that inserted into the page automatically.
    For example old CSS had .mat-card-header { height: 40px } which doesn't seem to exist in new Card CSS.
  • Angular Material still adds some CSS to the page but this height value is not there.
    • What should I do now?
    • Should I re-design my project's CSS from ground up
      using new Material themes as a base, or
    • should I add the CSS I was using into the new project and make them all !important
      so new Material CSS can't overwrite them or something?

I'd appreciate any advice.

Ashish Ratan
  • 2,838
  • 1
  • 24
  • 50
dstr
  • 8,362
  • 12
  • 66
  • 106
  • No doubt, some components may have been changed internally, but the v7 card still uses `.mat-card-header`. I think you will have to be specific about what you are doing (global style or component style, ...) to get any useful help - actual code samples would be necessary, preferably a working (not working) StackBlitz example. – G. Tranter Dec 11 '18 at 15:40
  • problem, we had to update all our css's, another option is not to update the material version – RikiF Dec 13 '18 at 07:41

0 Answers0