Input textfields height is not changing with 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>

This is working when changing it in browser

CodePudding user response：

if you change

"&.label[data-shrink=false] .MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":

to

"& .MuiInputBase-input":

it should work