How do I use the error prop and css for Input API of Material UI with context

user_13208950 0
Viewed 513

I need to use the MUI Input API props and CSS for {error} and its use.

My code looks like this:

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} />

Now as per material docs error - bool - If true, the input will indicate an error. This is normally obtained via context from FormControl.

And for pseudo class error - .Mui-error - Pseudo-class applied to the root element if error={true}.

Now I can't get around to use the error state to true because of value type described as a string!

What am I missing? Please help!

material-ui typescript reactjs html
1 Answers

We can see from the Material-UI document of Input API

For props: error

Type: bool
Description: If true, the input will indicate an error.

For css: error

Global class: .Mui-error
Description: Pseudo-class applied to the root element if error={true}.

They are two different things, we can use them like below:

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

If the props error's value is true, the CSS error's styles would be applied.

That's the concept of those kinds of stuff. Since there is no more info we can get from the post, if there are further problems, kindly make an update.

user_118722460
Related