修改ngx-charts的内部CSS

Question

当我旋转 ngx-charts Advanced Pie Chart example 时，我的图例数字被截断了。深入研究 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.

如何修改 legend-item 的 CSS 使其具有适当的边距？

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

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;
}

Answer 1

“@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;
}

Answer 2

此代码应消除 CSS 组件封装，以便您可以覆盖您的样式

添加 encapsulation: ViewEncapsulation.None 到 pietest.component.ts 文件中的 @Component 部分。

修改ngx-charts的内部CSS

Modifying the inner CSS of ngx-charts

html

css

angular

ngx-charts