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)

Answer 2

As ::ng-deep is now being deprecated it is better to avoid the accepted answer.

What worked for me was to add an id to the stack view:

<clr-stack-view  id="adjusted-column-stack-view">`

Then in one of your global style sheets such as styles.css add:

#adjusted-column-stack-view .stack-block-label {
  max-width: 10%;
  flex-basis: 10%;
}

This needs to be set in one of the global style sheets, preferably the style sheet with the highest specificity.

Credit goes to @youdz from the following Github issue: Vmware Clarity - Accordion Component #250