Angular 2项目中覆盖ngx-charts组件样式及边距调整咨询

我来帮你搞定这个样式调整的问题！结合你的需求，我们需要针对ngx-charts高级饼图的图例列表添加margin-top，同时给总数行添加margin-bottom。由于Angular的组件样式默认是封装隔离的，我们需要用::ng-deep来穿透访问ngx-charts内部的DOM元素，具体调整如下：

修改后的CSS代码 #

.invoice-chart {
  height: 350px;

  /* 保留你原有的背景色设置 */
  ::ng-deep ngx-charts-advanced-pie-chart div div .advanced-pie-legend-wrapper {
    background-color: red;
  }

  /* 给图例列表添加顶部外边距 */
  ::ng-deep ngx-charts-advanced-pie-chart div div .advanced-pie-legend-wrapper .advanced-pie-legend {
    margin-top: 16px; /* 你可以根据需求调整数值 */
  }

  /* 给总数行添加底部外边距 */
  ::ng-deep ngx-charts-advanced-pie-chart div div .advanced-pie-legend-wrapper .advanced-pie-legend-total {
    margin-bottom: 16px; /* 你可以根据需求调整数值 */
  }
}

关键说明 #

• ::ng-deep：用来突破Angular的组件样式封装，确保我们的样式能作用到ngx-charts组件内部的DOM元素上。如果你的样式是写在全局样式文件（比如styles.scss）里，也可以省略::ng-deep，但更推荐用它配合组件样式来限定作用域，避免全局污染。
• 选择器定位：.advanced-pie-legend是图例的列表容器，.advanced-pie-legend-total是显示总数的元素，这两个都是ngx-charts高级饼图图例的默认类名。
• 数值调整：你可以把16px改成符合你项目设计规范的数值，比如20px或者1rem。

如果你的Angular版本比较新，::ng-deep可能会提示过时，但目前它仍然是最可靠的穿透组件样式的方式，或者你也可以尝试用ViewEncapsulation.None，不过那样会取消组件样式封装，需要谨慎使用。

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