How can I reduce width of clarity stack component label

Question

How can I reduce width of clarity stack component label

https://vmware.github.io/clarity/documentation/stack-view

I have added following custom style to the selector but no luck

Styles added :

.myStyle {
    max-width: 10% !important;
    flex-basis: 10% !important;
}

Answer 1

Please refer to this Plnkr: https://plnkr.co/edit/gUm8yInQN9DSbO6K8nCE?p=preview (View the app.component.css file)

::ng-deep .stack-view .stack-block-label {
  flex: 0 0 20%;
}

You need to use the ::ng-deep combinator or else the styles won't be applied within the component. This is mentioned in the Angular documentation: https://angular.io/guide/component-styles (Search for ::ng-deep)