Стиль кнопки пользовательского интерфейса материала в ответ на собственную проверку HTML5 - PullRequest
0 голосов
/ 19 марта 2020

Мой базовый вопрос: Как заставить кнопку отправки 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...