Модификация внутренней CSS диаграмм ngx

Question

Когда я запускаю ngx-диаграммы Advanced P ie Пример диаграммы , номера моей легенды обрезаются. При копании в 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.

Как я могу изменить CSS legend-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;
}

Answer 1

Эта проблема не возникает в "@ swimlane / ngx-charts": "^ 9.0.0". Однако, если вы хотите изменить стиль в своей версии, чтобы решить эту проблему, используйте приведенный ниже код в вашем pietest.component.s css.

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

. Напоминаем, что приведенный выше код будет применяться к вашему все приложение, которое соответствует правилу, поскольку оно не инкапсулировано в вашем компоненте, когда вы делаете это, и похоже на вставку приведенного ниже кода в ваш стиль. css.

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

Answer 2

Этот код должен исключить инкапсуляцию компонента CSS, чтобы вы могли перезаписать свой стиль

добавить encapsulation: ViewEncapsulation.None в @Component секцию в файле pietest.component.ts.