This seems to be more than just a thin wrapper like https://github.com/rainerschuster/final-form-material-ui was. I kind of prefer the simplicity of focus of final-form-material-ui.
This appears to be attempting to do too much. Though if it gives you exactly what you want, great.
onChange
The callback seems to receive 2 arguments. e and reactChild
In the past I got the selected value using e.target.value This seems to work.
Not sure of the use of the reactChild element that the callback receives.
Another important note regarding recording the recorded value of the select is noted in the "value" prop explanition ( below, on this very page )
Changing the semantic element
You might want to turn it into a span for any number of reasons. eg if you want one word in a sentence to be another color / style eg. I wear a red hat
<Typography component="div" >
Contact Details :
<Typography component="div" display="inline" variant="body2" color="black"> elroinoronha2@gmail.com </Typography> </Typography>
(copy it to a code editor for the code to make sense)
is a good solution since it defeats the "h1 cannot be a child of h1" DOM error + let us use the sx prop.
We would not be able to use sx prop to style the inline part if we would use the native <span> component
ie. <Typography > yo mama <span> so fat </span> </Typography>
You would have to use inline style styling instead.
Another option (at least in v5) is to use the Box component and select the underlying html element to be img as given in the example below (copied from official docs for v5)
This <Box/> method is the preffered way of doing it. The <Paper/> method too is a good idea.
The basic reasoning is that only MUI components support the sx prop ie. only they can fully use the MUI systems features.
Thus, it doesnt make sense to use the native <img/> component in the markup, as it does not support sx
The SX prop does not work with non MUI components eg. native <img/> component. To style this, you will have to use the native inline styling ie. <img style=" ............". />
If you want to style the img and use some MUI system specific features, ie. you need to use sx ; do the following.
Use <Box component="img" sx={{ }} /> instead. This supports the sx prop, thus your image will be customizable with sx prop.
Color
The color prop does not support all MUI theme colors / their shades DIRECTLY through its color prop. Eg. The color prop supports primary but not primary.main/dark. It does not support the palette warning color at all.
To remedy this you have 2 options 1 BETTER -- give the icon the desired color through the sx prop OR 2. wrap the icon in a box and give the box to desired color