如何在MUI React的TimePicker组件中设置高度、宽度与圆角

要调整TimePicker输入框的高度、宽度和圆角，核心是精准定位到输入框对应的内部组件（默认是OutlinedInput），以下是两种可行方案：

方法1：通过slotProps.textField设置（推荐） #

TimePicker基于TextField组件实现，直接通过slotProps.textField传入样式，更符合组件设计规范：

<TimePicker
  ampm={false}
  views={['hours', 'minutes', 'seconds']}
  sx={{
    backgroundColor: "#333335",
    color: "#FFFF",
    // 保留你原有其他样式
  }}
  slotProps={{
    popper: {
      sx: {
        "& .MuiList-root": {
          backgroundColor: "#333335",
        },
        "& .MuiMenuItem-root": {
          "&.Mui-selected": {
            backgroundColor: "#04395E",
            color: "white"
          },
          color: "white"
        },
        "& .MuiDialogActions-root": {
          backgroundColor: "#333335",
        },
        "& .MuiSvgIcon-root": {
          "&.MuiSvgIcon-fontSizeMedium": {
            backgroundColor: "#04395E",
            color: "white"
          },
          color: "white"
        },
      },
    },
    // 新增TextField的样式配置
    textField: {
      sx: {
        width: 320, // 设置输入框整体宽度
        '& .MuiOutlinedInput-root': {
          height: 64, // 设置输入框高度
          borderRadius: 8, // 设置圆角大小
          '& input': {
            color: "#FFFF",
            fontSize: "1.4rem",
          },
          '& fieldset': {
            borderColor: '#555', // 可选：自定义边框颜色
          }
        }
      }
    }
  }}
  value={selectedTime}
  onChange={(newTime: any) => setSelectedTime(newTime)}
  timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>

方法2：直接在TimePicker的sx中覆盖样式 #

如果不想拆分配置，也可以直接在TimePicker的sx里定位到目标类：

<TimePicker
  ampm={false}
  views={['hours', 'minutes', 'seconds']}
  sx={{
    backgroundColor: "#333335",
    color: "#FFFF",
    width: 320, // 直接设置组件宽度
    '& .MuiOutlinedInput-root': {
      height: 64,
      borderRadius: 8,
      '& input': {
        color: "#FFFF",
        fontSize: "1.4rem",
      },
    },
    // 保留你原有其他样式
  }}
  slotProps={{
    // 保留原有popper样式
  }}
  value={selectedTime}
  onChange={(newTime: any) => setSelectedTime(newTime)}
  timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>

关键说明： #

• 默认输入框使用的是OutlinedInput组件，对应的类是MuiOutlinedInput-root；如果你的TimePicker是filled类型，需要替换为MuiFilledInput-root。
• 高度设置在MuiOutlinedInput-root上才能生效，直接给input设置height只会改变文本区域高度，不会影响整个输入框容器。

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