Переопределить CSS стиля селектора компонента из модуля ng

Question

Я пытаюсь изменить средство выбора цвета css модуля, чтобы адаптировать его к моему веб-сайту (выровнять его по центру).

Вот код средства выбора цвета:

@Component({
  selector: 'color-circle',
  template: `
    <div
      class="circle-picker {{ className }}"
      [style.width.px]="width"
      [style.margin-right.px]="-circleSpacing"
      [style.margin-bottom.px]="-circleSpacing"
    >
      <color-circle-swatch
        *ngFor="let color of colors"
        [circleSize]="circleSize"
        [circleSpacing]="circleSpacing"
        [color]="color"
        [focus]="isActive(color)"
        (onClick)="handleBlockChange($event)"
        (onSwatchHover)="onSwatchHover.emit($event)"
      ></color-circle-swatch>
    </div>
  `,
  styles: [
    `
      .circle-picker {
        display: flex;
        flex-wrap: wrap;
      }
    `,
  ],

Я использую justify-content: center для выбора круга класса, чтобы выровнять его, но ничего не происходит, поэтому я не знаю, смогу ли я это сделать.

Вот какЯ использую селектор:

<color-circle [colors]="colors" [color]="productForm.get('color')?.value" (onChange)="onColorChanged($event)" width="190px" circleSize="34" circleSpacing="18"></color-circle>

Когда я проверяю код в браузере, я могу сделать это, но с файлом CSS ничего не работает.

Может ли кто-нибудь помочь?

Вот что я хочу:

Вот что у меня есть:

Автор палитры цветов: https://github.com/scttcper/ngx-color

Answer 1

Если вы хотите установить стиль для элементов внутри вашего host компонента.вы должны использовать :host, а для изменения более глубоких элементов вы должны использовать ::ng-deep

Использовать

:host color-circle ::ng-deep color-circle-swatch{
   justify-content: center;
   align-items:center
}

Answer 2

Может быть, эти две строки кода могут решить вашу проблему

.color-circle-swatch{
  margin: 0 auto;
  width:100%;
}