如何为MUI自定义Button变体单独配置defaultProps默认属性？

MUI 主题的variants配置仅负责样式匹配与注入，原生不支持在变体配置项内直接声明defaultProps，你给出的期望写法无法生效。

实现仅对自定义myVariantX变体生效的默认属性配置，优先使用组件封装方案，维护成本最低、逻辑最可控：

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

// 照常定义主题与自定义变体样式
const theme = createTheme({
  components: {
    MuiButton: {
      variants: [{
        props: {
          variant: 'myVariantX'
        },
        style: {
          backgroundColor: 'blue'
        }
      }]
    }
  },
});

// 封装对应变体的专用组件，注入专属默认属性
const MyVariantXButton = (props) => {
  // 末尾展开props保证手动传入的属性可以覆盖默认值
  return <Button variant="myVariantX" disableRipple {...props} />
}

业务代码中直接使用MyVariantXButton即可，该组件默认携带myVariantX的自定义样式和disableRipple: true配置，完全不会影响其他普通MuiButton组件的默认行为。

不推荐在全局defaultProps中通过判断variant值注入属性，这种写法会打乱MUI内部的属性优先级，容易出现手动传入的属性无法覆盖默认值的异常。如果只是少量场景使用，也可以在直接使用Button时手动传入对应props，不需要额外封装。

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