如何将 Angular Clarity Design 4.0 输入宽度设置为 100%？

Question

对于旧版本，我可以轻松覆盖 Clarity Design 表单控件的默认 CSS 行为以使用父级宽度的 100%。

对于 4.0 版本，我什至无法在 Chrome Inspector 上为 clr-input-container 和所有子元素（clr-control-container、clr-input-wrapper 设置 style="width: 100%" , input).

有人有幸尝试使 Clarity Design 4.0 的输入元素适合 100% 宽度吗？

Answer 1

您可以使用 clr-* class 对输入应用样式。例如，

.clr-input,
.clr-input-wrapper {
  max-width: 100%;
  width: 100%;
}

.clr-control-container, 
.clr-input-wrapper.clr-input {
  padding-left: 0;
  padding-right: 0;
}

看看这个stackblitz。

如何将 Angular Clarity Design 4.0 输入宽度设置为 100%？

How to set Angular Clarity Design 4.0 input width to 100%?

css

angular

vmware-clarity