从ng模块覆盖组件选择器样式的CSS

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