Как переопределить угловую тему материала из глобального файла CSS

Question

Я использую угловой материал. Иногда я хочу переопределить встроенные темы, в моем случае это indigo-pink.css. Я делаю это так:

::ng-deep .mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element,
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, 
::ng-deep .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #10014B !important;
}

и у меня все работает нормально. Однако когда я использую тот же код из глобального файла CSS, где я устанавливаю инкапсуляцию = нет

encapsulation: ViewEncapsulation.None

код в других файлах не видит мой переопределенный класс css. У кого-нибудь есть идеи почему?

Заранее спасибо!

Answer 1

Если вы пишете CSS на глобальном уровне, вам не нужно использовать :: ng-deep, если их специфичность выше, они будут применяться по умолчанию (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), чтобы изучить инкапсуляцию подробнее, вы можете следовать ниже этого ( https://alligator.io/angular/viewencapsulation/)