MUI v5升级后主题配置与样式方案使用疑问及TypeScript多组件实践示例需求

我来帮你梳理清楚MUI v5和Emotion的协作逻辑，以及自定义主题的使用方式，同时给你一个TypeScript跨组件的实践示例。

一、先解决最核心的：自定义主题值的正确使用 #

你已经完成了TypeScript的主题类型扩展，这一步非常关键！现在在组件里访问theme.mycompany.primary有几种靠谱的方式：

1. 直接在MUI组件的sx属性中使用 #

sx属性支持直接接收一个回调函数，参数就是当前主题，不需要额外调用useTheme：

import { Box } from "@mui/material";

const MyComponent = () => {
  return (
    <Box sx={{ backgroundColor: (theme) => theme.mycompany.primary }}>
      我用了自定义主题的背景色
    </Box>
  );
};

2. 通过useTheme钩子获取主题 #

如果需要在组件逻辑中使用主题值，推荐从@mui/material/styles导入useTheme（而非Emotion的），因为MUI的ThemeProvider已经把主题上下文共享给了Emotion，两者拿到的是同一个主题对象：

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

const MyComponent = () => {
  const theme = useTheme();
  // 可以在逻辑中使用主题值
  console.log("自定义主色调:", theme.mycompany.primary);
  
  return (
    <Box sx={{ backgroundColor: theme.mycompany.primary }}>
      我用了自定义主题的背景色
    </Box>
  );
};

二、MUI组件 vs Emotion组件：什么时候用哪个？ #

MUI v5的底层样式引擎就是Emotion，两者是深度集成的，不用纠结“二选一”，而是按需搭配：

• 优先用MUI内置组件 + sx属性：比如Box、Button、Card这些，sx属性是MUI专为快速样式开发设计的，支持主题变量、响应式设计，还能直接覆盖MUI组件的默认样式，效率最高。
• 用Emotion的styled写完全自定义组件：如果需要创建MUI没有的组件（比如特殊布局容器、自定义交互元素），就用import styled from '@emotion/styled'来写，它能直接访问MUI的主题变量：

  import styled from "@emotion/styled";
  
  const CustomCard = styled.div`
    background-color: ${props => props.theme.mycompany.primary};
    border-radius: ${props => props.theme.shape.borderRadius}px;
    padding: 1rem;
  `;
  

• 关于旧的createStyles/useStyles：这是MUI v4的makeStyles方案，v5里虽然兼容，但官方已经标记@mui/styles为废弃状态，长期来看建议逐步迁移到sx或styled。迁移时可以先把旧样式转换成sx属性，或者用styled组件包裹旧组件。

三、TypeScript跨文件主题实践示例 #

下面是一个完整的跨组件主题使用示例，覆盖类型定义、主题创建、Provider配置、组件使用全流程：

1. 全局主题类型定义（src/types/mui.d.ts） #

把类型扩展放在全局类型文件里，确保所有组件都能获得类型提示：

import { Theme as MuiTheme } from "@mui/material/styles";

// 扩展MUI的主题类型
declare module "@mui/material/styles" {
  interface Theme extends MuiTheme {
    mycompany: {
      primary: string;
      secondary: string;
      borderRadius: string;
    };
  }

  // 允许在createTheme时配置自定义属性
  interface ThemeOptions {
    mycompany?: {
      primary?: string;
      secondary?: string;
      borderRadius?: string;
    };
  }
}

// 让Emotion的主题也继承MUI的类型
declare module "@emotion/react" {
  interface Theme extends MuiTheme {}
}

2. 创建主题（src/theme.ts） #

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

export const theme = createTheme({
  palette: {
    primary: {
      main: "#003366",
    },
  },
  mycompany: {
    primary: "#003366",
    secondary: "#6699cc",
    borderRadius: "8px",
  },
});

3. App根组件配置Provider（src/App.tsx） #

注意：不需要嵌套MUI和Emotion的两个ThemeProvider！ MUI的ThemeProvider已经集成了Emotion的主题上下文，一个就够了：

import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
import { BrowserRouter as Router } from "react-router-dom";
import { theme } from "./theme";
import HomePage from "./pages/HomePage";
import CustomCard from "./components/CustomCard";

const App = () => {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Router>
          <HomePage />
          <CustomCard />
        </Router>
      </ThemeProvider>
    </StyledEngineProvider>
  );
};

export default App;

4. 页面组件使用sx（src/pages/HomePage.tsx） #

import { Box, Typography, Button } from "@mui/material";

const HomePage = () => {
  return (
    <Box sx={{ padding: 4, maxWidth: 1200, margin: "0 auto" }}>
      <Typography variant="h4" sx={{ color: (theme) => theme.mycompany.primary, marginBottom: 3 }}>
        欢迎使用MUI v5自定义主题
      </Typography>
      <Button 
        variant="contained"
        sx={{ backgroundColor: (theme) => theme.mycompany.secondary }}
      >
        自定义按钮
      </Button>
    </Box>
  );
};

export default HomePage;

5. 自定义组件使用Emotion styled（src/components/CustomCard.tsx） #

import styled from "@emotion/styled";
import { Typography } from "@mui/material";

const StyledCard = styled.div`
  background-color: ${props => props.theme.mycompany.secondary};
  border-radius: ${props => props.theme.mycompany.borderRadius};
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: ${props => props.theme.shadows[3]};
`;

const CustomCard = () => {
  return (
    <StyledCard>
      <Typography sx={{ color: (theme) => theme.mycompany.primary }}>
        这是用Emotion styled创建的自定义卡片，直接使用MUI主题变量
      </Typography>
    </StyledCard>
  );
};

export default CustomCard;

四、过渡旧样式方案的小技巧 #

如果项目里还有大量createStyles/useStyles的代码，可以分步骤迁移：

1. 新组件一律用sx或styled，不再新增makeStyles代码；
2. 旧组件修改时，先把useStyles里的样式转换成sx属性，比如把className={classes.container}改成<Box sx={containerStyles}>；
3. 对于复杂的样式逻辑，可以直接用styled组件替换旧的样式钩子。

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