Override CSS of component selector style from ng module - css

Question

I'm trying to modify the css color picker of a module, in order to adapt it to my website (align it to center).
Here's the code of the color picker:
#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;
}
`,
],
I'm using justify-content: center to the class circle-picker to align it, but nothing happens, so I don't really know if I'm able to do it.
Here's how I use the selector:
<color-circle [colors]="colors" [color]="productForm.get('color')?.value" (onChange)="onColorChanged($event)" width="190px" circleSize="34" circleSpacing="18"></color-circle>
When I inspect the code with the browser, I can make it, but with the CSS file nothing works.
Could anyone help?
This is what I want:
This is what I have:
Author of the color picker:
https://github.com/scttcper/ngx-color

Answer 1

If you want to set style to elements inside your host component. you must use :host
and to change deeper elements you have to use ::ng-deep
Use
:host color-circle ::ng-deep color-circle-swatch{
justify-content: center;
align-items:center
}

Answer 2

May be this two line of code can fix your problem
.color-circle-swatch{
margin: 0 auto;
width:100%;
}