无法更改输入字段高度 MUI reactjs答案

【问题标题】：Unable to change input fields height MUI reactjs无法更改输入字段高度 MUI reactjs
【发布时间】：2022-01-07 06:49:32
【问题描述】：

输入文本字段的高度不会随内联 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>

在浏览器中更改它时有效

【问题讨论】：

把"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input"改成input是否接受样式？
没有@MohsenMahoski
您能否提供一个示例来重现您所面临的问题？像 codesanbox 还是 git repo？
我粘贴了该组件的完整代码

标签： css reactjs material-ui

【解决方案1】：

如果你改变了

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

到

"& .MuiInputBase-input":

它应该可以工作

【讨论】：