Material UI：如何修改Date Picker的日期文本与日历图标颜色？

问题原因 #

你之前的配置存在两处错误导致仅边框样式生效：

• InputProps属性直接挂载在DesktopDatePicker组件上，没有正确透传给内部渲染的TextField，样式传递路径错误
• 仅给notchedOutline类添加了样式，该类仅控制输入框外边框，输入文本、日历图标对应其他类名，未针对性配置自然不生效
• 额外注意：你代码中导入的makeStyles来自@material-ui/core，如果是MUI v5版本混用不同包的样式工具可能出现优先级冲突，建议统一换成@mui/material/styles下的makeStyles

单组件局部修改方案 #

第一步：调整样式定义 #

const useStyles = makeStyles(() =>
  createStyles({
    noBorder: {
      outline: "none",
      border: "none",
    },
    // 控制输入文本颜色
    inputRoot: {
      color: "#fff",
    },
    // 控制右侧日历图标颜色
    inputAdornment: {
      "& .MuiSvgIcon-root": {
        color: "#fff",
      }
    }
  })
);

第二步：调整组件传参 #

将InputProps放到renderInput回调的TextField属性中，同时保留原有params里的InputProps避免丢失内置功能：

<DesktopDatePicker
  inputFormat="dd/MM/yyyy"
  value={value}
  onChange={handleChange}
  renderInput={(params) => <TextField 
    {...params} 
    InputProps={{
      ...params.InputProps,
      classes: {
        notchedOutline: classes.noBorder,
        root: classes.inputRoot,
        adornedEnd: classes.inputAdornment
      },
    }}
  />}
/>

全局theme配置方案 #

如果需要全局生效，直接在theme.tsx的createTheme配置中添加如下规则即可：

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

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        // 移除边框
        notchedOutline: {
          border: 'none',
          outline: 'none'
        },
        // 输入文本颜色
        root: {
          color: '#fff'
        },
        // 日历图标颜色
        adornedEnd: {
          '& .MuiSvgIcon-root': {
            color: '#fff'
          }
        }
      }
    }
  }
})

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