覆盖只读/禁用样式/ CSS

Question

禁用输入字段时覆盖材料设计样式的正确/最佳方法是什么？

开箱即用

角材料输入示例

---

我可以通过以下CSS实现我的目标，但这是有效的方法吗？好像我搞砸了Angular Material的内部一样。有没有更好的办法？

// override material design input field styling for readonly mode
.mat-form-field-disabled .mat-form-field-underline {
    height: 0;
}

.mat-input-element:disabled {
    color: $header-text-color;
}

Answer 1

是的，这种方式是正确的，你可以从添加自定义CSS规则的任何元素mat-input与disabled类或类似的东西。

但是你应该知道，什么时候，什么元素和什么类 Angular Material 应用（在你的情况下，对于禁用的输入）。有了这些知识，您就可以轻松实现目标。

看起来像你需要::ng-deep和!important有时。我可以建议的另一件事是缩小目标元素的范围，以排除影响您不想影响的其他元素。

Answer 2

看起来您想要只读。只读和禁用是两个不同的东西。如果您想要只读，请使用<input readonly="true">.