React & Material-UI：自定义组件自动关联主题样式实现方法

要让你的自定义组件自动加载Material-UI主题中配置的样式，核心是让组件接入Material-UI的原生样式系统，具体操作如下：

1. 修正主题配置结构 #

Material-UI对自定义组件的样式配置有固定结构，需要把样式放在components.[组件名].styleOverrides.root节点下，而非直接挂载在组件名节点：

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

export const myTheme = createTheme({
  // 你的主题基础配置（如调色板、字体等）
  components: {
    MySuperContainer: {
      styleOverrides: {
        root: {
          padding: '10px',
          // 可添加其他样式，比如 backgroundColor: '#f5f5f5'
        },
      },
    },
  },
});

2. 用Material-UI内置styled创建组件 #

使用Material-UI自带的styled工具构建你的自定义组件，它会自动关联主题中对应的样式配置，完全不需要手动调用useTheme或额外处理：

import { styled } from '@mui/material/styles';

// 基于div创建容器，也可以替换成section、article等基础元素
const MySuperContainer = styled('div')(() => ({
  // 可选：这里可以写组件的默认样式，主题中的配置会覆盖这些默认值
}));

export default MySuperContainer;

3. 直接使用组件 #

现在你可以直接在代码中使用<MySuperContainer />，它会自动从myTheme中读取并应用配置的样式：

import MySuperContainer from './MySuperContainer';
import { ThemeProvider } from '@mui/material/styles';
import { myTheme } from './theme';

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <MySuperContainer>
        这里是容器内容
      </MySuperContainer>
    </ThemeProvider>
  );
}

export default App;

补充说明 #

• 这里用的styled是Material-UI内置的工具，并非第三方的styled-components库，完全符合你的需求。
• 如果需要给组件添加动态样式（比如根据props调整），依然可以在styled的回调中通过props实现，但主题配置的静态样式会自动生效。
• 如果你完全不想用styled，唯一的替代方案是在组件内部用useTheme获取样式并手动绑定到sx，但这和你不想用useTheme的要求冲突，因此上述styled方案是最优解。

内容的提问来源于stack exchange，提问作者Jan Šlajchrt