如何在MUI React的TimePicker中修改时钟颜色与Ok按钮字体颜色

问题背景 #

尝试通过CSS className修改MUI React TimePicker的时钟数字颜色、Ok按钮字体颜色等属性未成功，需改用sx或slotProps实现深色主题下的样式适配，需调整的元素包括：弹出时钟的数字色、选中时间的高亮样式、底部OK按钮颜色、输入框文字及边框色等。

解决方案 #

针对TimePicker的不同组件模块，通过sx属性覆盖主容器及输入框样式，通过slotProps指定弹出层、时钟面板及操作按钮的样式，以下是调整后的完整代码：

<TimePicker
  ampm={false}
  views={['hours', 'minutes', 'seconds']}
  // 主输入容器及输入框样式
  sx={{
    backgroundColor: "#333335",
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: '#555', // 输入框默认边框色
      },
      '&:hover fieldset': {
        borderColor: '#fff', // 鼠标悬浮时边框色
      },
      '&.Mui-focused fieldset': {
        borderColor: '#04395E', // 聚焦时边框色
      },
    },
    '& .MuiInputBase-input': {
      color: '#FFFF', // 输入框文字色
      fontSize: '1.4rem',
      fontWeight: 'bold',
    },
  }}
  slotProps={{
    // 弹出层及内部时钟面板样式
    popper: {
      sx: {
        '& .MuiPaper-root': {
          backgroundColor: '#333335', // 弹出层整体背景色
        },
        // 时钟数字按钮样式
        '& .MuiTimeClock-root': {
          '& .MuiTimeClock-digitButton': {
            color: '#fff', // 未选中数字的文字色
            '&.Mui-selected': {
              backgroundColor: '#04395E', // 选中数字的背景色
              color: '#fff', // 选中数字的文字色
            },
            '&:hover': {
              backgroundColor: '#04395E80', // 鼠标悬浮时数字按钮背景色
            },
          },
        },
        // 底部操作栏（含OK按钮）样式
        '& .MuiDialogActions-root': {
          backgroundColor: '#333335',
          '& .MuiButton-text': {
            color: '#fff', // OK按钮文字色
            '&:hover': {
              backgroundColor: '#04395E80', // OK按钮悬浮背景色
            },
          },
        },
        // 时间切换箭头图标样式
        '& .MuiIconButton-root': {
          color: '#fff', // 箭头图标颜色
          '&:hover': {
            backgroundColor: '#04395E80', // 箭头悬浮背景色
          },
        },
      },
    },
  }}
  value={selectedTime}
  onChange={(newTime: any) => setSelectedTime(newTime)}
  timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
/>

关键修改说明 #

• 输入框样式：通过& .MuiOutlinedInput-root精准定位输入框容器，覆盖不同状态下的边框色；通过& .MuiInputBase-input设置输入框文字样式
• 时钟面板样式：使用& .MuiTimeClock-digitButton定位时钟数字按钮，分别配置未选中、选中、悬浮状态的颜色
• OK按钮样式：在MuiDialogActions-root容器下定位按钮元素，修改文字色及交互状态
• 弹出层背景：通过MuiPaper-root设置弹出面板的整体背景色，适配深色主题

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