如何修改Material-UI中Time pickers的图标颜色

没问题！要修改时间选择器（Time pickers）的默认图标颜色，其实不同UI组件库的实现方式略有不同，我给你整理了几种最常用的方案，你可以根据自己项目用的库来对应操作：

如果你的项目用的是MUI v5+，有两种常用方式：

• 直接在组件上自定义样式（适合单个组件修改）：
  通过sx属性精准覆盖图标的样式：

  <TimePicker
    label="选择时间"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    sx={{
      '& .MuiSvgIcon-root': {
        color: '#ff4081' // 替换成你想要的自定义色值
      }
    }}
    renderInput={(params) => <TextField {...params} />}
  />
  

• 全局主题配置（适合整个项目统一图标颜色）：
  修改MUI主题，让所有TimePicker图标都应用自定义颜色：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const customTheme = createTheme({
    components: {
      MuiTimePicker: {
        styleOverrides: {
          icon: {
            color: '#2196f3'
          }
        }
      }
    }
  });
  
  // 在根组件外层包裹ThemeProvider
  <ThemeProvider theme={customTheme}>
    <YourAppComponent />
  </ThemeProvider>
  

不管是原生Bootstrap还是react-bootstrap的TimePicker，都可以用CSS直接覆盖：

/* 原生Bootstrap时间选择器的时间图标 */
.bootstrap-timepicker-widget .glyphicon-time {
  color: #4caf50;
}

/* react-bootstrap TimePicker的图标 */
.react-bootstrap-time-picker input + span.glyphicon {
  color: #4caf50;
}

如果是自己实现的或者用了小众组件库，步骤很简单：

1. 打开浏览器开发者工具（F12），选中时间选择器的图标元素
2. 找到它对应的CSS类名（比如.time-picker-icon）
3. 写自定义CSS覆盖颜色：

   /* SVG图标用fill属性 */
   .time-picker-icon {
     fill: #9c27b0;
   }
   
   /* 字体图标用color属性 */
   .time-picker-icon {
     color: #9c27b0;
   }
   

小提示：如果不确定图标是SVG还是字体类型，看开发者工具里的元素标签——<svg>标签就是SVG图标，<i>或<span>带字体类的就是字体图标~

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