Use of ::ng-deep is applying styles globally

Question

jordandh opened this issue 4 years ago · comments

Describe the bug
The color-picker and timer-picker components are using the ::ng-deep selector to apply styles to material components globally.

To Reproduce
Steps to reproduce the behavior:

Go to mcc documentation website
Go to the timer-picker example
Open a timer-picker
Inspect a mat-icon-button in the timer-picker
Scroll through the styles until you find global styles being applied by the timer-picker component

.mat-icon-button {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

Expected behavior
I expect the library to not change styles outside of its own components.

Desktop (please complete the following information):