如何修改Material UI DatePicker的边框颜色？

我用Material UI实现了DatePicker，只想修改它的边框颜色，但尝试过自定义classes、修改主题主色、WithStyles等方法都没生效。

针对Material UI v5的方案 #

MUI v5推荐用sx prop或styled组件直接覆盖样式，核心是精准定位输入框的边框类：

1. 用sx prop快速修改

import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';
import { useState } from 'react';

export default function CustomDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => (
          <TextField
            {...params}
            sx={{
              // 默认状态边框颜色
              '& .MuiOutlinedInput-notchedOutline': { borderColor: '#ff4444' },
              // 鼠标悬浮状态
              '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: '#ffaa00' },
              // 聚焦状态
              '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: '#00cc66' }
            }}
          />
        )}
      />
    </LocalizationProvider>
  );
}

2. 用styled组件封装复用

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';
import { useState } from 'react';

const StyledDateTextField = styled(TextField)`
  & .MuiOutlinedInput-notchedOutline {
    border-color: #663399;
  }
  &:hover .MuiOutlinedInput-notchedOutline {
    border-color: #9966cc;
  }
  &.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #cc99ff;
  }
`;

export default function CustomDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => <StyledDateTextField {...params} />}
      />
    </LocalizationProvider>
  );
}

针对Material UI v4的方案 #

v4版本用makeStyles定位类名即可：

import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import DatePicker from '@material-ui/lab/DatePicker';
import MuiPickersUtilsProvider from '@material-ui/lab/MuiPickersUtilsProvider';
import DateFnsUtils from '@material-ui/lab/AdapterDateFns';
import { useState } from 'react';

const useStyles = makeStyles({
  customInput: {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: '#0099cc',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: '#33bbff',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: '#66ddff',
    }
  }
});

export default function CustomDatePicker() {
  const classes = useStyles();
  const [value, setValue] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="选择日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        inputVariant="outlined"
        TextFieldComponent={(props) => <TextField {...props} className={classes.customInput} />}
      />
    </MuiPickersUtilsProvider>
  );
}

核心原因：DatePicker的输入框本质是TextField的Outlined变种，边框样式都由MuiOutlinedInput-notchedOutline类控制。之前没生效大概率是样式优先级不足，或者没精准定位到这个类，用上述方法直接覆盖对应状态的样式即可。

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