如何修改Angular中igniteui-webcomponents包的igc-star组件尺寸？

你之前直接用font-size修改.rating-stars类样式无效，是因为ignite-webcomponents的组件基于Shadow DOM封装，普通CSS选择器无法穿透到组件内部元素。要调整星星尺寸，需要用::part伪元素定位组件内部的星星节点：

方法一：统一调整所有星星尺寸 #

在样式文件中添加：

.rating-stars::part(star) {
  font-size: 2rem; /* 根据需求修改数值，比如1.5rem、32px等 */
}

方法二：分别控制已选中/未选中星星的尺寸和颜色 #

如果需要对已填充、未填充的星星做差异化设置，可使用filled-star和empty-star这两个特定part：

.rating-stars::part(filled-star) {
  font-size: 2rem;
  color: goldenrod;
}

.rating-stars::part(empty-star) {
  font-size: 2rem;
  color: #e0e0e0;
}

对应的HTML代码（优化Angular属性绑定写法） #

<igc-rating class="rating-stars" [value]="property.rating" min="0" max="5"></igc-rating>

原理说明：igniteui-webcomponents的组件暴露了可定制的part属性，允许开发者通过::part选择器穿透Shadow DOM修改内部元素样式，这是符合Web Components标准的样式定制方式。

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