stackworx / formik-mui

Bindings for using Formik with Material-UI
https://stackworx.github.io/formik-mui
MIT License
971 stars 143 forks source link

What is the `sxFormControl` in select `formControl` prop #342

Closed mrasadatik closed 2 years ago

mrasadatik commented 2 years ago

Code from the doc ------->

import { Field } from 'formik';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import { Select } from 'formik-mui';

<Field
  component={Select}
  formControl={{ sx: sxFormControl }}
  formHelperText={{ children: 'How old are you?' }}
  id="age"
  name="age"
  labelId="age-simple"
  label="Age"
  validate={(age: number) =>
    !age
      ? 'Please enter your age'
      : age < 21
      ? 'You must be 21 or older'
      : undefined
  }
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Field>;

In this code formControl={{ sx: sxFormControl }} what is this - how the sxFormControl came? I tried removing the sx from the sxFormControl but it's occurred a recursion issue!

mrasadatik commented 2 years ago

I figured out what was that, all the FormControl props go there!!!!