如何覆盖MUI X Date Picker v5样式并实现hover状态边框色修改？

你当前的选择器逻辑有误，& > fieldset.MuiOutlinedInput-root:hover 试图匹配自身带有MuiOutlinedInput-root类且处于hover状态的fieldset元素，但实际hover状态是触发在MuiInputBase-root（或MuiOutlinedInput-root）容器上，fieldset是它的直接子元素，所以需要调整选择器的层级关系。

正确的主题覆盖代码 #

MuiInputBase: {
  styleOverrides: {
    root: {
      // 默认状态下的边框颜色
      '& > fieldset': {
        borderColor: '#000000',
      },
      // 容器hover时修改子元素fieldset的边框颜色
      '&:hover > fieldset': {
        borderColor: 'red',
      },
      // 可选：聚焦状态下的边框颜色（按需添加）
      '&.Mui-focused > fieldset': {
        borderColor: 'blue',
      },
    },
  },
},

逻辑说明 #

• &:hover > fieldset：表示当MuiInputBase-root容器触发hover状态时，选中它的直接子级fieldset元素，以此实现hover时的样式变更。
• 如果你的日期选择器使用的是Outlined样式，也可以直接针对MuiOutlinedInput编写规则，逻辑完全一致：

MuiOutlinedInput: {
  styleOverrides: {
    root: {
      '& > fieldset': {
        borderColor: '#000000',
      },
      '&:hover > fieldset': {
        borderColor: 'red',
      },
    },
  },
},

内容的提问来源于stack exchange，提问作者Ignacio-Diaz