Here is a snippet of JSX code:
import TextField from '@material-ui/core/TextField/TextField';
<Col xs={6}>
<TextField
pattern=".{3,}"
name="fullName"
label={intl.formatMessage(messages.fullName)}
type="text"
margin="normal"
fullWidth
/>
</Col>
<Col xs={6}>
<TextField
name="email"
label={intl.formatMessage(messages.email)}
type="email"
margin="normal"
required
fullWidth
/>
</Col>
An issue has been observed with the CSS applied to the email field:
.MuiInputBase-inputType-121 {
height: 1.1875em;
}
This particular rule is causing problems only on the email field. The following image shows the problem:
https://i.sstatic.net/ABdN1.png
The display can be restored by disabling this rule.
What is the correct way to configure .MuiInputBase-inputType-121 so that it does not interfere with the email field?