Мой базовый вопрос: Как заставить кнопку отправки MUI выглядеть отключенной (или стилизованной каким-либо образом) в ответ на ввод формы MUI, который required
через HTML5 проверку собственной формы?
У меня есть динамически сгенерированная форма с использованием элементов пользовательского интерфейса. Я хочу отключить кнопку отправки, если какое-либо из полей с атрибутом required
недопустимо. Как мне это сделать? Может быть, у меня неправильный подход, и мне следует выбрать другой?
Традиционно я бы обрабатывал проверку через Yup или какую-то подобную библиотеку, но эта форма полностью динамическая c и включала в себя все виды условно загруженных связанных входных данных. различных типов. Добиться того, чтобы все было хорошо с любой библиотекой форм, было кошмаром, поэтому я пытаюсь просто использовать встроенную проверку HTML5, чтобы справиться с этим (в основном любой ввод с атрибутом required
будет препятствовать отправке формы, если он не имеет какого-либо значения). Это прекрасно работает, но я не могу понять, как стилизовать или иным образом отключить кнопку отправки.
За пределами MUI это можно сделать так:
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
Однако я не могу перевести это во что-то, что, кажется, работает с кнопкой пользовательского интерфейса материала.
Прямой перевод что в стилизованные компоненты может выглядеть следующим образом:
const useLocalStyles = makeStyles((theme: Theme) =>
createStyles({
someClassName: {
color: 'red',
'&:invalid': {
color: 'green'
}
}
, который я пытаюсь применить следующим образом:
<Button classes={{ root: classes.someClassName }} ...stuff />
Но это ничего не делает.
Как бы получить MUI кнопка отправки кажется отключенной (или стилизованной каким-либо образом) в ответ на ввод формы многоязыкового интерфейса пользователя, который является required
?