如何减少清晰度堆栈组件标签的宽度

Question

如何减少清晰度堆栈组件标签的宽度

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

我在选择器中添加了以下自定义样式但没有运气

添加样式：

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

Answer 1

请参阅此Plnkr：https://plnkr.co/edit/gUm8yInQN9DSbO6K8nCE?p=preview（查看app.component.css文件）

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

您需要使用::ng-deep组合器，否则将无法在组件中应用这些样式。 Angular文档中提到了这一点：https://angular.io/guide/component-styles（搜索::ng-deep）

Answer 2

由于:: ng-deep现在已被弃用，因此最好避免接受答案。

对我有用的是在堆栈视图中添加一个id：

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

然后在您的一个全局样式表（例如styles.css）中添加：

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

这需要在全局样式表之一中设置，最好是具有最高特异性的样式表。

来自以下Github问题的信用来自@youdz：Vmware Clarity - Accordion Component #250