Пользовательская стилизация конкретного компонента применяется ко всем компонентам в угловых 6

Question

Сетка пользовательского интерфейса, я пытаюсь применить пользовательский стиль к определенному компоненту (я хочу изменить размер шрифта для этого конкретного компонента), но когда я пишу код CSS в этот файл CSS конкретного компонента, и после загрузки этого компонента этот стильтакже применяется ко всем другим компонентам

следующий код в файле css

.k-grid td {
 font-size: 10px !important;
 }

 .k-grid tr {
  font-size: 10px;
 }

код в файле ts

@Component({
  selector: 'app-work-request-queue-child',
  templateUrl: './work-request-queue-child.component.html',
  styleUrls: ['./work-request-queue-child.component.css'],
  encapsulation:ViewEncapsulation.None
})

ранее стиль не применялся, поэтомупосле обращения в службу поддержки telerik, меня попросили добавить инкапсуляцию: ViewEncapsulation.None в ts file.so, теперь стиль работает нормально, но применяется ко всем компонентам, не понимая, почему это происходит.

Answer 1

вместо использования encapsulation:ViewEncapsulation.None вы должны убедиться, что стиль применяется только тогда, когда ваш компонент загружен.

сделайте это, добавив следующее в ваш CSS

:host ::ng-deep .k-grid td {
  font-size: 10px !important;
}

:host ::ng-deep .k-grid tr {
  font-size: 10px;
}

это обеспечит применение стиля, но только в контексте загрузки вашего компонента.

, хотя селектор ng-deep помечен как отклоненный от угла, в настоящее время лучшего способа добиться этого нет.

Пожалуйста, прочтите также документацию о стилях компонентов и убедитесь, что вы понимаете, как они работают: https://angular.io/guide/component-styles