使用CRA+Material-UI+Styled Components时，如何正确访问Material-UI主题？

我一眼就看出问题所在了——你现在用的是Material-UI的ThemeProvider，但Styled Components的styled函数只能识别它自己的ThemeProvider传递的主题对象。这俩是不同库的组件，互不通用，所以才会出现你看到的矛盾：MUI那边主题完整，但Styled Components里拿到的props.theme是空对象。

下面是两种可行的解决方案，你可以根据项目情况选择：

方案一：嵌套两个ThemeProvider（推荐） #

直接导入Styled Components的ThemeProvider，把Material-UI生成的主题传递给它，让两个库的组件都能共享同一套主题配置：

修改后的App.js代码 #

import React from "react";
import "./App.css";
import { StylesProvider, ThemeProvider as MuiThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider as StyledThemeProvider } from 'styled-components'; // 导入Styled的ThemeProvider
import { StyledButtonUsingTheme } from "./StyledApp";

function App() {
  const defaultTheme = createMuiTheme();
  window.console.log("Default theme passing to ThemeProvider", defaultTheme);
  return (
    <StylesProvider injectFirst>
      {/* MUI的ThemeProvider供MUI原生组件使用 */}
      <MuiThemeProvider theme={defaultTheme}>
        {/* Styled的ThemeProvider供Styled Components使用，传入MUI的主题 */}
        <StyledThemeProvider theme={defaultTheme}>
          <div className="App">
            <StyledButtonUsingTheme variant="outlined">
              Styled Button Using Theme
            </StyledButtonUsingTheme>
          </div>
        </StyledThemeProvider>
      </MuiThemeProvider>
    </StylesProvider>
  );
}

export default App;

修改后，你的StyledButtonUsingTheme就能正常访问props.theme.palette.error.light了。

方案二：用MUI的useTheme钩子手动传主题 #

如果你的项目里只有少量Styled Components需要访问MUI主题，也可以在组件里用MUI的useTheme钩子获取主题，然后作为props直接传给Styled组件：

修改后的App.js代码 #

import React from "react";
import "./App.css";
import { StylesProvider, ThemeProvider } from "@material-ui/styles";
import { createMuiTheme, useTheme } from "@material-ui/core/styles";
import { StyledButtonUsingTheme } from "./StyledApp";

function App() {
  const defaultTheme = createMuiTheme();
  return (
    <StylesProvider injectFirst>
      <ThemeProvider theme={defaultTheme}>
        <ButtonWrapper />
      </ThemeProvider>
    </StylesProvider>
  );
}

// 新建子组件，用useTheme获取主题并传递
function ButtonWrapper() {
  const theme = useTheme();
  return (
    <div className="App">
      <StyledButtonUsingTheme theme={theme} variant="outlined">
        Styled Button Using Theme
      </StyledButtonUsingTheme>
    </div>
  );
}

export default App;

补充说明 #

再明确下核心原因：Material-UI的ThemeProvider是专为MUI原生组件和它自己的样式方案（比如makeStyles、@material-ui/styles里的styled）设计的，它不会把主题传递给Styled Components的样式系统。只有Styled Components自己的ThemeProvider才能让它的styled函数拿到主题对象。

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