如何修改MUI React中TimePicker下拉框的背景色与字体颜色

问题描述 #

尝试通过CSS className属性和sx prop修改MUI React中TimePicker的背景色、字体颜色等属性，但未生效。相关代码如下：

<TimePicker
          ampm={false}
          views={['hours', 'minutes', 'seconds']}
          sx={{
            backgroundColor: "#333335",
            font: "white",
            color: "#FFFF",
            textDecoration: "bold",
            input: {
              color: "#FFFF",
              fontSize: "1.4rem",
            },
              "& .MuiTimePicker-root": {
              backgroundColor: "#222223",
            },
            "& .MuiTimePicker-input": {
              color: "#FFFF",
              fontSize: "1.2rem",
            },
          }}
          value={selectedTime}
          onChange={(newTime: any) => setSelectedTime(newTime)}
          timeSteps={{hours: 1, minutes: 1, seconds: 1}}
        />

解决方法 #

1. 正确定位组件实际类名 #

MUI TimePicker由多个底层组件（如TextField、PickersPopper、TimePickerView）组合而成，直接使用.MuiTimePicker-root这类顶层类名无法覆盖所有元素样式，需针对实际渲染的DOM结构选择类名：

• 修改输入框区域：
  输入框属于TextField的OutlinedInput组件，通过以下sx配置修改：

  '& .MuiOutlinedInput-root': {
    backgroundColor: '#333335',
    // 修改输入框边框
    '& fieldset': {
      borderColor: '#555',
    },
    '&:hover fieldset': {
      borderColor: '#777',
    },
    // 修改输入文本样式
    '& .MuiInputBase-input': {
      color: '#fff',
      fontSize: '1.4rem',
      fontWeight: 'bold', // 替换错误的textDecoration: 'bold'
    }
  }
  

• 修改弹出的时间选择面板：
  面板属于PickersPopper组件，通过以下sx配置修改：

  '& .MuiPickersPopper-paper': {
    backgroundColor: '#222223',
    // 修改面板内文字颜色
    '& .MuiTypography-root': {
      color: '#fff',
    },
    // 修改时钟数字样式
    '& .MuiPickersClockNumber-root': {
      color: '#fff',
      '&.Mui-selected': {
        backgroundColor: '#444', // 选中数字的背景色
      }
    }
  }
  

2. 修正CSS属性错误 #

原代码中存在几个属性使用错误：

• font: "white"：无效属性，如需设置字体颜色直接用color
• textDecoration: "bold"：加粗应使用fontWeight: "bold"
• #FFFF：无效颜色值，正确写法为#FFFFFF或简写#fff

3. 查找MUI组件样式类名的途径 #

• 浏览器开发者工具：按F12打开控制台，查看TimePicker渲染后的DOM结构，直接提取对应元素的类名
• MUI官方文档：每个组件的API页面均包含“CSS”章节，列出该组件及关联子组件的所有可用CSS类名

修正后的完整代码 #

<TimePicker
  ampm={false}
  views={['hours', 'minutes', 'seconds']}
  sx={{
    '& .MuiOutlinedInput-root': {
      backgroundColor: '#333335',
      '& fieldset': {
        borderColor: '#555',
      },
      '& .MuiInputBase-input': {
        color: '#fff',
        fontSize: '1.4rem',
        fontWeight: 'bold',
      }
    },
    '& .MuiPickersPopper-paper': {
      backgroundColor: '#222223',
      '& .MuiTypography-root': {
        color: '#fff',
      },
      '& .MuiPickersClockNumber-root': {
        color: '#fff',
        '&.Mui-selected': {
          backgroundColor: '#444',
        }
      }
    }
  }}
  value={selectedTime}
  onChange={(newTime) => setSelectedTime(newTime)}
  timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
/>

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