如何修改MUI TextField time类型的图标颜色？是否有CSS实现方式？

要修改MUI中time类型TextField的图标颜色，可通过以下几种方式实现：

方法一：使用styled组件自定义样式 #

通过styled组件直接覆盖图标的CSS类：

import { TextField, styled } from '@mui/material';

const StyledTimeTextField = styled(TextField)(({ theme }) => ({
  '& .MuiSvgIcon-root': {
    color: '#ff0000', // 设置目标颜色
  },
}));

// 使用示例
<StyledTimeTextField type="time" label="Time" />

方法二：通过sx属性内联样式 #

针对单个组件修改时，用sx属性更便捷：

<TextField
  type="time"
  label="Time"
  sx={{
    '& .MuiSvgIcon-root': {
      color: 'green',
    },
  }}
/>

方法三：全局主题定制 #

如果需要全局统一修改所有time类型TextField的图标颜色，可在主题中配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& input[type="time"] + .MuiSvgIcon-root': {
            color: '#0000ff',
          },
        },
      },
    },
  },
});

// 在应用根组件包裹使用
<ThemeProvider theme={theme}>
  <TextField type="time" label="Time" />
</ThemeProvider>

补充说明 #

MUI time类型TextField的图标对应AccessTime组件，CSS类为.MuiSvgIcon-root，通过该选择器即可修改颜色。如果需要区分组件状态（如聚焦、禁用），可添加状态类细化样式，例如&.Mui-focused .MuiSvgIcon-root用于修改聚焦时的图标颜色。

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