stackworx / formik-mui

Bindings for using Formik with Material-UI

Home Page:https://stackworx.github.io/formik-mui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

mrasadatik opened this issue · comments

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!

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