如何为Telerik Angular的kendo-label组件设置固定宽度

这个问题的根源是Angular默认的ViewEncapsulation.Emulated样式封装机制，父组件的样式默认只会作用于自身模板的原生DOM元素，内嵌的第三方子组件（如kendo-label）内部的DOM属于子组件视图范围，默认不受父组件样式影响，所以直接在组件scss中写kendo-label选择器不会生效。

可用解决方案 #

方案1：使用::ng-deep配合宿主选择器（最常用） #

使用Angular提供的::ng-deep伪类穿透样式封装，同时加:host前缀限定作用范围，避免污染全局其他kendo-label组件。
在numeric-box.scss中添加以下样式：

/* 仅作用于当前组件内部的kendo-label */
:host ::ng-deep kendo-label {
  width: 150px;
  display: inline-block; /* 行内元素默认不支持宽度设置，需显式指定display属性 */
}

注意：虽然::ng-deep被官方标记为废弃状态，但目前没有明确的移除时间表，是社区内穿透样式封装的主流实现方案。

方案2：修改组件视图封装模式 #

将当前自定义组件的视图封装模式设置为ViewEncapsulation.None，组件内的所有样式会被提升到全局，为了避免样式污染，需要给组件外层元素加唯一的类名做范围限定：

1. 模板外层添加唯一类名：

<div class="numeric-box-wrapper field">
    <kendo-label [text]="label">
        <kendo-numerictextbox [value]="value"></kendo-numerictextbox>
    </kendo-label>
    <span class="field-unit">{{unit}}</span>
</div>

2. 组件ts文件修改封装配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-numeric-box',
  templateUrl: './numeric-box.component.html',
  styleUrls: ['./numeric-box.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭当前组件的样式封装
})
export class NumericBoxComponent {
  // 原有组件逻辑
}

3. numeric-box.scss中写样式：

.numeric-box-wrapper kendo-label {
  width: 150px;
  display: inline-block;
}

方案3：绑定自定义类名限定选择范围 #

给kendo-label绑定自定义类名，配合::ng-deep使用，避免误改同组件内其他kendo-label样式：

1. 模板添加自定义类：

<kendo-label [text]="label" class="numeric-box-label">
    <kendo-numerictextbox [value]="value"></kendo-numerictextbox>
</kendo-label>

2. scss添加样式：

:host ::ng-deep .numeric-box-label {
  width: 150px;
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者serge