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

Question

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

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

添加的样式：

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

score 4 · Accepted Answer

请参考此 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）

score 0 · Accepted Answer

由于 ::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%;
}

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

2 回答 2