如何将外部theme.js的自定义MUI组件应用到CrashCourse1.js的JSX？

要让自定义按钮组件读取主题样式并正常生效，需要完成以下几个关键步骤：

1. 全局注入自定义主题 #

首先必须在应用的根层级用MUI的ThemeProvider包裹组件，这样所有子组件都能访问到theme.js里的自定义主题。在你的应用入口文件（比如App.js或index.js）中添加如下代码：

import { ThemeProvider } from '@mui/material/styles';
import theme from './path/to/theme'; // 替换成你的theme.js实际路径
import MuiCrashCourse1 from './path/to/CrashCourse1'; // 替换成对应路径

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MuiCrashCourse1 />
    </ThemeProvider>
  );
}

export default App;

2. 修改MyCustomButton.js读取主题样式 #

你不需要手动import theme文件，MUI的styled组件会自动通过props传递主题对象。直接在回调函数里通过theme参数访问自定义主题的配置即可：

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

export const CustomButton = styled(Button)(({ theme }) => ({
  // 读取主题primary主色作为文字颜色
  color: theme.palette.primary.main,
  // 应用theme中自定义的myCustomButton配置
  ...theme.myCustomButton.myVariant,
  // 读取自定义颜色作为背景色
  backgroundColor: theme.palette.myCustomColor.main,
  // 自定义hover状态样式
  '&:hover': {
    backgroundColor: theme.palette.myCustomColor.superDark,
  }
}));

关键说明： #

• theme.palette.primary.main：直接访问主题中定义的主色调
• ...theme.myCustomButton.myVariant：将主题里myCustomButton.myVariant的配置（这里是variant: 'contained'）展开应用到组件
• 所有在theme.js中定义的自定义配置（比如myCustomColor）都可以通过theme参数直接访问

3. 修正CrashCourse1.js的组件导入 #

因为MyCustomButton.js导出的是命名导出CustomButton，所以导入时要使用命名导入方式：

import { Fragment } from 'react';
import { Typography } from '@mui/material';

// 改为命名导入，对应组件的导出方式
import { CustomButton } from '../styles/MyCustomButton';

const MuiCrashCourse1 = () => {
  return (
    <Fragment>
      <Typography variant="myVariant">This is my app</Typography>
      <Typography sx={{ color: 'myCustomColor.superLight' }}>Hit the like button!</Typography>
      <CustomButton>Hello from MUI V5</CustomButton>
    </Fragment>
  )
}

export default MuiCrashCourse1;

额外提示 #

• 所有需要访问主题的组件必须放在ThemeProvider的包裹范围内，否则无法读取自定义主题
• 你在CrashCourse1.js中使用sx={{ color: 'myCustomColor.superLight' }}的方式是正确的，MUI会自动解析主题中的自定义颜色路径

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