Reactjs '；未定义'；尝试将MaterialUI主题道具传递给样式化组件时

我试图在一个样式化组件中访问我的材质UI主题道具，但是我一直

TypeError：无法在浏览器中读取未定义的

或类似错误的属性“primary”

这是我的自定义主题（

index.ts

）

这里是我的主题在

App.tsx

// Other imports
import theme from "../../app/theme/index";

const App: React.FC = () => {
    return (
        <>
            <StylesProvider injectFirst>
                <ThemeProvider theme={theme}>
                    // Routing stuff
                </ThemeProvider>
            </StylesProvider>
        </>
    );
};

export default App;

---

除了材质UI

ThemeProvider

，您还需要使用样式化组件中的

ThemeProvider

（

SCThemeProvider

）；否则，样式化组件将不知道您的主题

以下是一个工作示例：

import {
  createMuiTheme,
  StylesProvider,
  ThemeProvider
} from "@material-ui/core";
import { ThemeProvider as SCThemeProvider } from "styled-components";
import * as React from "react";
import Dashboard from "./Dashboard";
import "./styles.css";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#1a1aff",
      contrastText: "#FFF"
    },
    secondary: {
      main: "#ff3333",
      contrastText: "#FFF"
    }
  },
  typography: {
    h5: {
      fontSize: "10px"
    }
  }
});

export default function App() {
  return (
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <SCThemeProvider theme={theme}>
          <Dashboard />
        </SCThemeProvider>
      </ThemeProvider>
    </StylesProvider>
  );
}

导入{
创造博物馆，
StylesProvider，
ThemeProvider
}来自“@材料界面/核心”；
从“样式化组件”导入{ThemeProvider as SCThemeProvider}；
从“React”导入*作为React；
从“/Dashboard”导入仪表板；
导入“/styles.css”；
const theme=createMuiTheme({
调色板：{
主要：{
main:#1a1aff”，
对比文本：“FFF”
},
中学：{
主要内容：“ff3333”，
对比文本：“FFF”
}
},
排版：{
h5：{
字体大小：“10px”
}
}
});
导出默认函数App（）{
返回(
);
}

---

除了材料界面

主题Provider

之外，您还需要使用

样式化组件
主题Provider
。您可以在两个提供程序中指定相同的主题。有关使用
样式化组件的示例
ThemeProvider
，请参见此处的我的答案：。我仍然无法根据链接问题的答案将其与示例一起使用-。我可能还在哪里出错？可能是打字稿吗？
import { ListItem } from "@material-ui/core";
import React from "react";
import styled from "styled-components";

const Brand = styled(ListItem)`
    background-color: ${props => props.theme.palette.primary.dark},
    padding: ${props => props.theme.spacing(1)},
    font-size: ${props => props.theme.typography.h6.fontSize},
    font-weight: ${props => props.theme.typography.fontWeightMedium},
    color: "white",
    min-height: "64px",
    padding-left: ${props => props.theme.spacing(6)}
`;

const SidebarNew: React.FC = () => {

    return (
        <Brand button>
            // Stuff
        </Brand>
    );
};

export default SidebarNew;

const Brand = styled(ListItem)(({ theme }) => ({
    backgroundColor: theme.palette.primary.dark,
    padding: theme.spacing(1),
    fontSize: theme.typography.h6.fontSize,
    fontWeight: theme.typography.fontWeightMedium,
    color: "white",
    minHeight: 64,
    paddingLeft: theme.spacing(6)
}));

import {
  createMuiTheme,
  StylesProvider,
  ThemeProvider
} from "@material-ui/core";
import { ThemeProvider as SCThemeProvider } from "styled-components";
import * as React from "react";
import Dashboard from "./Dashboard";
import "./styles.css";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#1a1aff",
      contrastText: "#FFF"
    },
    secondary: {
      main: "#ff3333",
      contrastText: "#FFF"
    }
  },
  typography: {
    h5: {
      fontSize: "10px"
    }
  }
});

export default function App() {
  return (
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <SCThemeProvider theme={theme}>
          <Dashboard />
        </SCThemeProvider>
      </ThemeProvider>
    </StylesProvider>
  );
}