Having trouble adjusting the height of input textfields using in-line css.
<FormControl
sx={{
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red",
},
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
{
height: "25px",
},
}}
>
<LocalizationProvider
dateAdapter={AdapterDateFns}
sx={{
BackgroundColor: "red",
}}
>
<DateRangePicker
startText="Start date"
endText="End date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField
{...startProps}
/>
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
</FormControl>
The issue seems to resolve itself when changes are made directly in the browser.
https://i.sstatic.net/bzB53.png https://i.sstatic.net/USxxk.png