MUI中如何创建支持主题配置的真正自定义组件？

完全可以实现，以下是基于MUI v5的标准实现方案：

1. 自定义组件核心实现 #

import * as React from 'react';
import { styled, useThemeProps } from '@mui/material/styles';
import Button from '@mui/material/Button';

// 自定义按钮根节点样式
const MyCustomButtonRoot = styled(Button, {
  name: 'MyCustomButton', // 和主题配置的组件key保持一致
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root,
})(() => ({
  // 可写入组件默认样式，优先级低于主题的styleOverrides
}));

// 自定义子组件（对应你提到的MyCustomButtonSubComponent）
const MyCustomButtonSubComponent = styled('div', {
  name: 'MyCustomButton',
  slot: 'MyCustomButtonSubComponent',
  overridesResolver: (props, styles) => styles.MyCustomButtonSubComponent,
})(() => ({
  // 子组件默认样式
}));

const MyCustomButton = React.forwardRef(function MyCustomButton(inProps, ref) {
  // 合并主题配置、默认属性和传入属性
  const props = useThemeProps({
    props: inProps,
    name: 'MyCustomButton', // 和主题配置的组件key保持一致
  });
  const { children, ...rest } = props;

  return (
    <MyCustomButtonRoot ref={ref} {...rest}>
      {children}
      <MyCustomButtonSubComponent />
    </MyCustomButtonRoot>
  );
});

// 设置muiName属性，和组件名保持一致
MyCustomButton.muiName = 'MyCustomButton';

export default MyCustomButton;

2. 主题配置（和你要求的写法完全兼容） #

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

const customTheme = createTheme({
  components: {
    MyCustomButton: {
      // 可选：配置组件默认属性
      defaultProps: {
        variant: 'contained',
        disableElevation: true,
      },
      styleOverrides: {
        root: {
          borderRadius: '12px',
          padding: '8px 24px',
          // 其他根节点样式
        },
        MyCustomButtonSubComponent: {
          width: '8px',
          height: '8px',
          borderRadius: '50%',
          backgroundColor: '#fff',
          marginLeft: '8px',
          // 其他子组件样式
        }
      }
    }
  }
});

3. 组件使用 #

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <MyCustomButton>自定义按钮</MyCustomButton>
    </ThemeProvider>
  );
}

注意事项 #

• styled参数中的name、useThemeProps的name、组件的muiName、主题components下的key四个值必须完全一致，否则主题配置不会生效
• 如果是纯自定义组件无需基于现有MUI组件扩展，把styled的第一个参数替换为对应的原生标签即可

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