Как использовать опору ошибки и css для API ввода материала UI с контекстом - PullRequest
Новая
       45

Как использовать опору ошибки и css для API ввода материала UI с контекстом

2 голосов
/ 04 апреля 2020

Мне нужно использовать реквизиты MUI Input API и CSS для {error} и его использования.

Мой код выглядит следующим образом: 

const [value, setValue] = useState<string>(cell.value);
const [startAdornment, setStartAdornment] = useState<adornmentTypes>("");
const [endAdornment, setEndAdornment] = useState<adornmentTypes>("");
const [error, seterror] = useState<error>(false);

<Input
  id={id}
  value={value}
  onChange={_onChange} //have a method
  onBlur={_onBlur} //have a method
  onFocus={_handleFocus} //have a method
  startAdornment={startAdornment} //have switch cases on special character $,% etc
  endAdornment={endAdornment}
  error={error} />

Теперь по материалам документов error - bool - If true, the input will indicate an error. This is normally obtained via context from FormControl.

И для псевдокласса error - .Mui-error - Pseudo-class applied to the root element if error={true}.

Теперь я не могу обойтись, чтобы использовать состояние ошибки в true из-за типа значения, описываемого как строка!

Чего мне не хватает? Пожалуйста, помогите!

1 Ответ

0 голосов
/ 04 апреля 2020

Мы можем видеть из документа Material-UI API ввода

Для реквизитов: Ошибка

Тип: bool
Описание: при значении true на входе будет отображаться ошибка.

Для css: ошибка

Глобальный класс: .Mui-error
Описание: псевдокласс применяется к элементу root, если error = {true}.

Это две разные вещи, мы можем использовать их, как показано ниже: 

<Input
  ...
  error={errorFlag}
  classes={{error: classes.errorStyleClass}}
/>

Если значение ошибки реквизита равно true, будут применены стили ошибки CSS.

Это понятие такого рода вещей. Поскольку больше информации мы не можем получить из поста, если есть дальнейшие проблемы, пожалуйста, сделайте обновление.

...