angular - 覆盖只读/禁用样式/CSS

Question

禁用输入字段时覆盖 Material Design 样式的正确/最佳方法是什么？

开箱即用

Angular Material Input Examples

---

我能够通过以下 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。我可以建议的另一件事是缩小目标元素的范围，以排除影响您不想影响的其他元素。