如何修复MUI V5中ownerState.color的TypeScript错误

要修改所有按钮的悬停颜色并解决ownerState的类型问题，可按以下方案操作：

方法一：全局主题配置（修改所有按钮） #

通过createTheme扩展MUI组件样式，利用ownerState判断按钮变体/状态来设置悬停样式：

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

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          '&:hover': {
            // 基础浅色悬停背景
            backgroundColor: '#f5f5f5',
            // 针对不同变体做差异化处理
            ...(ownerState.variant === 'contained' && {
              backgroundColor: '#e0e0e0'
            }),
            ...(ownerState.variant === 'outlined' && {
              backgroundColor: '#fafafa',
              borderColor: '#bdbdbd'
            })
          }
        })
      }
    }
  }
});

// 在根组件中包裹ThemeProvider
function App() {
  return <ThemeProvider theme={theme}>{/* 你的应用内容 */}</ThemeProvider>;
}

方法二：自定义Styled按钮 #

如果需要局部按钮生效，用styled组件创建自定义按钮，同时处理类型：

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

// 基于MUI Button扩展，自动继承类型
const LightHoverButton = styled(Button)(({ theme, ownerState }) => ({
  '&:hover': {
    backgroundColor: theme.palette.grey[100],
    // 根据按钮颜色属性调整
    ...(ownerState.color === 'primary' && {
      backgroundColor: theme.palette.primary.light
    })
  }
}));

// 使用示例
<LightHoverButton variant="contained">测试按钮</LightHoverButton>

解决TypeScript类型报错 #

如果遇到ownerState属性不存在的类型提示，可扩展MUI的Button类型声明：

import { ButtonOwnerState } from '@mui/material/Button';

// 扩展Button的OwnerState类型（添加自定义属性时用）
declare module '@mui/material/Button' {
  interface ButtonOwnerState {
    // 这里添加你的自定义属性，比如isLightHover?: boolean;
  }
}

扩展后，TS会自动识别新增的ownerState属性，避免类型报错。

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