从 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

也许这两行代码可以解决你的问题

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

Answer 2

如果您想为 host 组件中的元素设置样式。你必须使用:host 要更改更深层次的元素，您必须使用::ng-deep

使用

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