修改ngx-charts的内部CSS

当我旋转 ngx-charts 时高级饼图示例，我的传奇号码被切断了。深入研究 CSS，这似乎是因为margin-top被设置为-6px:

在浏览器中试验后发现10px让事情看起来如我所愿。所以在组件的 CSS 中，我添加了：

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

但是，这根本不会影响图例项的 CSS。我尝试过各种变体!important, ::ng-deep等等，但我所做的一切似乎都不会影响 CSS。

我怎样才能修改CSSlegend-item这样它就会有适当的余量？

下面是我重现屏幕截图的完整组件：

pietest.component.ts

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

@Component({
  selector: 'app-pietest',
  templateUrl: './pietest.component.html',
  styleUrls: ['./pietest.component.css']
})
export class PietestComponent {

  view: any[] = [1000, 500];

  single: any[] = [
    {
      "name": "Germany",
      "value": 8940000
    },
    {
      "name": "USA",
      "value": 5000000
    },
    {
      "name": "France",
      "value": 7200000
    },
      {
      "name": "UK",
      "value": 6200000
    }
  ];

  // options
  gradient: boolean = true;
  showLegend: boolean = true;
  showLabels: boolean = true;
  isDoughnut: boolean = false;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() { }
}

pietest.component.html

<ngx-charts-advanced-pie-chart
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  >
</ngx-charts-advanced-pie-chart>

pietest.component.css

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

此问题不会出现在“@swimlane/ngx-charts”：“^9.0.0”中。但是，如果您想更改版本中的样式来解决此问题，请在您的版本中使用以下代码pietest.component.scss.

/deep/ .advanced-pie-legend /deep/ .legend-items-container /deep/ .legend-items /deep/ 
.legend-item /deep/ .item-value {
    margin-top: 10px !important;
}

请注意，上面的代码将应用于匹配规则的整个应用程序，因为当您使用时它不再封装在您的组件中/deep/这与将下面的代码放入您的类似style.scss.

.advanced-pie-legend .legend-items-container .legend-items.legend-item .item-value {
    margin-top: 10px !important;
}