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

Question

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

我已将以下自定义样式添加到选择器，但没有成功

添加的样式：

.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">`

然后在您的一种全局样式 sheet 中，例如 styles.css 添加：

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

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

How can I reduce width of clarity stack component label