reactjs - 尝试将 MaterialUI 主题 Prop 传递给样式组件时出现“未定义”

Question

我正在尝试在样式组件中访问我的 Material-UI 主题 Prop ，但是我不断收到...

TypeError:无法读取未定义的属性“primary”或浏览器中的类似错误。

这是我的自定义主题 (index.ts)

import { createMuiTheme } from "@material-ui/core";
import { blue } from "@material-ui/core/colors";

const theme = createMuiTheme({
    palette: {
      primary: {
        main: blue[800],
        contrastText: "#FFF"
      },
      secondary: {
        main: blue[600],
        contrastText: "#FFF"
      }
    },
    typography : {
        fontFamily: [
            "Nunito",
            "Roboto",
        ].join(",") 
    }
});

export default theme;

这是我的主题将我的应用程序包装在 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;

这是我尝试使用我的样式组件的地方

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;

可以编译，但在浏览器中失败。我在这里缺少什么？

如果我使用material-ui的内置styled，如下所示，它似乎可以工作，但我更喜欢直接使用styled-components

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)
}));

Answer 1

除了 Material-UI ThemeProvider 之外，您还需要使用 styled-components 中的 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>
  );
}