如何修改MUI Material v6中DatePicker输入框高度？设置失效求助

问题分析 #

你通过slotProps.textField.sx设置的height之所以只作用在外部的Paper组件上，是因为直接给textField的sx设置height时，这个样式会被应用到TextField的外层容器上，而Paper会继承这个容器的高度值；同时TextField内部的输入框元素有自己的样式优先级，不会直接继承这个height。

解决方案 #

需要通过MUI的CSS类名精准定位到TextField内部的元素来设置高度，同时显式指定Paper的高度避免继承冲突：

<Paper elevation={0} sx={{ height: 'auto' }}>
  <DatePicker
    fullWidth
    views={['year', 'month', 'day']}
    openTo='month'
    value={initialDate}
    slotProps={{
      textField: {
        sx: {
          // 定位TextField根容器
          '& .MuiTextField-root': {
            height: '10px'
          },
          // 定位输入框基础容器，调整内边距和字体适配高度
          '& .MuiInputBase-root': {
            height: '10px',
            padding: '0 8px',
            fontSize: '12px'
          },
          // 直接定位输入框元素
          '& .MuiInputBase-input': {
            height: '10px',
            lineHeight: '10px'
          }
        }
      }
    }}
    onChange={(newValue) => handleInitialDateChange(newValue)}
  />
</Paper>

关键要点 #

• 显式给Paper设置height: 'auto'，阻断它继承TextField容器的高度
• 利用MUI的内置类名（如.MuiInputBase-root、.MuiInputBase-input）精准设置输入框的高度，同时调整内边距、字体大小、行高来适配小高度，避免内容溢出或显示异常

内容的提问来源于stack exchange，提问作者Dark