MUI DatePicker聚焦态边框颜色无法修改：已用sx和!important仍无效

我尝试修改MUI DatePicker组件的边框颜色，包括其聚焦状态。已通过sx属性定位MuiOutlinedInput-root内部的fieldset元素，甚至添加了!important，但聚焦时仍显示蓝色边框。

极简代码 #

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function MyDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Start Date"
        sx={{
          width: '100%',
          '& .MuiInputLabel-root': {
            color: 'red',
            '&.Mui-focused': { color: 'violet' },
          },
          '& .MuiOutlinedInput-root': {
            '& fieldset': { borderColor: 'red' },
            '&:hover fieldset': { borderColor: 'red' },
            '&.Mui-focused fieldset': { borderColor: 'red !important' },
          },
          '& .MuiSvgIcon-root': { color: 'red' },
        }}
      />
    </LocalizationProvider>
  );
}

期望与问题 #

期望边框在正常、悬浮和聚焦状态下均为红色，但聚焦时仍变为蓝色。

已尝试的方法 #

• 为聚焦状态的fieldset添加!important
• 定位.MuiOutlinedInput-root和.MuiInputBase-root
• 通过.Mui-focused修改标签颜色

使用版本：最新版MUI v6和@mui/x-date-pickers

解答 #

原因 #

MUI v6中，DatePicker聚焦时会给内部的MuiOutlinedInput-notchedOutline元素添加默认蓝色的box-shadow，你只修改了border-color，视觉上蓝色阴影会覆盖边框的红色效果，导致看起来边框没生效。

正确解决方法 #

需要同时覆盖border-color和box-shadow属性，确保选择器优先级足够。直接在sx中针对聚焦状态的fieldset同时设置这两个属性即可：

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function MyDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Start Date"
        sx={{
          width: '100%',
          '& .MuiInputLabel-root': {
            color: 'red',
            '&.Mui-focused': { color: 'violet' },
          },
          '& .MuiOutlinedInput-root': {
            '& fieldset': { 
              borderColor: 'red',
            },
            '&:hover fieldset': { 
              borderColor: 'red',
            },
            '&.Mui-focused fieldset': { 
              borderColor: 'red',
              boxShadow: '0 0 0 2px rgba(255, 0, 0, 0.2)', // 自定义聚焦阴影颜色，与边框色匹配
            },
          },
          '& .MuiSvgIcon-root': { color: 'red' },
        }}
      />
    </LocalizationProvider>
  );
}

如果需要全局统一修改样式，也可以通过自定义主题实现，避免重复编写sx：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& fieldset': { borderColor: 'red' },
          '&:hover fieldset': { borderColor: 'red' },
          '&.Mui-focused fieldset': {
            borderColor: 'red',
            boxShadow: '0 0 0 2px rgba(255, 0, 0, 0.2)',
          },
        },
      },
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: 'red',
          '&.Mui-focused': { color: 'violet' },
        },
      },
    },
    MuiSvgIcon: {
      styleOverrides: {
        root: { color: 'red' },
      },
    },
  },
});

export default function MyDatePicker() {
  return (
    <ThemeProvider theme={theme}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker label="Start Date" sx={{ width: '100%' }} />
      </LocalizationProvider>
    </ThemeProvider>
  );
}

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