如何利用自定义Material UI主题及CSS变量创建专属自定义组件？

1. 扩展自定义主题的专属配置 #

在已有的createTheme中新增自定义组件的配置项，关联你的CSS变量：

import { createTheme } from '@mui/material/styles';
import theme from './_my-variables.scss';

const muiTheme = createTheme({
    palette: {
        primary: {
            main: theme['color-blue'],
        },
    },
    typography: {
        fontFamily: theme['brand-font'],
    },
    // 新增自定义组件的主题配置区
    customComponents: {
        MyCustomizeBox: {
            width: theme['custom-box-width'], // 对应你的CSS变量
            padding: theme['custom-box-padding'],
            // 可按需添加更多专属样式变量
        }
    }
});

2. 创建MyCustomizeBox自定义组件 #

使用MUI的useTheme钩子获取自定义主题，结合Box的sx属性实现专属样式，无需类名：

import { Box, useTheme } from '@mui/material';

export const MyCustomizeBox = ({ children, ...props }) => {
    const theme = useTheme();
    // 从自定义主题中取出专属配置
    const boxConfig = theme.customComponents.MyCustomizeBox;

    return (
        <Box
            sx={{
                width: boxConfig.width,
                padding: boxConfig.padding,
                // 允许传入的sx属性覆盖默认样式
                ...props.sx
            }}
            {...props}
        >
            {children}
        </Box>
    );
};

3. 使用自定义组件 #

直接在页面中引入使用，既保留主题一致性，也支持按需覆盖样式：

<MyCustomizeBox>
  <Paper>
    <Checkbox color="primary" />
    这是专属自定义Box中的内容
  </Paper>
</MyCustomizeBox>

// 按需覆盖默认样式示例
<MyCustomizeBox sx={{ width: '600px', backgroundColor: '#f5f5f5' }}>
  自定义样式的专属Box
</MyCustomizeBox>

方案说明 #

• useTheme钩子能直接获取ThemeProvider中传入的自定义主题，彻底解决withStyles获取默认主题的问题，符合MUI钩子式开发规范。
• 自定义组件仅针对MyCustomizeBox生效，不会修改全局Box组件样式。
• 所有样式基于已有CSS变量，确保主题样式的统一维护。

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