html - Hoe gebruik ik de error-prop en css voor de Input API van Material UI met context

Ik moet de MUI Input API-eigenschappen en CSS gebruiken voor {error} en het gebruik ervan.

Mijn code ziet er zo uit:

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

Nu volgens de materiaaldocumenten error - bool - Als waar, zal de invoer een fout aangeven. Dit wordt normaal verkregen via context van FormControl.

En voor pseudoklasse error - .Mui-error - Pseudoklasse toegepast op het root-element als error={true}.

Nu kan ik het foutstatus niet op waar instellen vanwege het gegevenstype dat als een string wordt beschreven!

Wat mis ik? Help alsjeblieft!

Antwoord #1

We kunnen dit zien uit het Material-UI document van de Input API

Voor props: fout

Type: bool
Beschrijving: Als dit waar is, zal de invoer een fout aangeven.

Voor css: fout

Globale klasse: .Mui-error
Beschrijving: Pseudo-klasse toegepast op het basiselement als error={true}.

Het zijn twee verschillende dingen, we kunnen ze als volgt gebruiken:

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

Als de waarde van de props-fout waar is, zouden de CSS-foutstijlen worden toegepast.

Dat is het concept van dat soort dingen. Aangezien er geen extra informatie te halen is uit de post, gelieve een update te maken als er verdere problemen zijn.