Why material UI css style not apply after angular and material version upgrade

Recently when upgrading angular and material UI version to 16 from lower vesion, somehow the css style does not apply correctly.

More investigation shows when upgrading to new material version, from some UI material component, the module was imported from legacy one instead of new material UI component, for example, the below code in app.module.ts, 

import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';

In order to fix the issue and get the expected UI look and feel, need to update the above code as below

import {MatInputModule} from '@angular/material/input';

import {MatProgressBarModule} from '@angular/material/progress-bar';

This should fix the css upgrading issue.

Using chrome developer tool to test css selector

 If you need to test css selector, you can use Chrome developer tool's console to do so.

For example, the below selector returns matched element id

document.querySelectorAll('#claimNumberInput')

you can also update UI to make it more visible

document.querySelectorAll('#claimNumberInput')[0].style.background=''red';