Переопределить только для чтения / отключить стилизацию / 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

Похоже, вы хотите только для чтения. Только чтение и отключение - это две разные вещи. Если вы хотите только для чтения, используйте <input readonly="true">.

Answer 2

Да, этот способ верен, вы можете просто добавить собственные правила CSS к любому элементу из mat-input с классом disabled или чем-то подобным.

Но вы должны знать, когда, к каким элементам и к каким классам относится Angular Material (в вашем случае, для отключенных входов). Обладая этими знаниями, вы можете легко достичь своих целей.

И похоже, вам иногда понадобятся ::ng-deep и !important. Еще одна вещь, которую я могу предложить, - это сузить круг целевых элементов, чтобы исключить влияние других элементов, на которые вы не хотите влиять.