带有 TypeScript/React/Material-UI 的全局主题

Question

我正在关注the official tutorial 为我的应用创建全局主题。

我的根组件应该提供全局主题：

const themeInstance = {
  backgroundColor: 'cadetblue'
}

render (
    <ThemeProvider theme={themeInstance}>
      <ChildComponent />
    </ThemeProvider>,
    rootNode
) 

但我似乎无法让我的子组件应用主题：

const useStyles = makeStyles(theme => {
  childComp: {
    backgroundColor: theme.backgroundColor
  }
})

const ChildComponent: FC = () => {
  const classes = useStyles()
  return (
    <div className={classes.childComp}>I'm a div</div>
  )
}

<ChildComponent /> 被渲染为无样式。

这似乎是某种类型不匹配的问题，因为当我开始使用 theme 参数的类型时，浏览器已呈现预期的输出（<ChildComponent /> div 和 background-color: cadetblue）一瞬间比错误失败。

非常感谢任何帮助找出我哪里出错的方法。

可以在over here找到实时沙盒。

---

Answer 1

您需要输入您的自定义主题。默认情况下makeStyle 将使用具有以下签名的默认主题类型：

export interface Theme {
  shape: Shape;
  breakpoints: Breakpoints;
  direction: Direction;
  mixins: Mixins;
  components?: Components;
  palette: Palette;
  shadows: Shadows;
  spacing: Spacing;
  transitions: Transitions;
  typography: Typography;
  zIndex: ZIndex;
  unstable_strictMode?: boolean;
}

如您所见，它没有backgroundColor 属性。您需要使用 module augmentation 来更新 Theme 定义，以使 typescript 停止抱怨不正确的主题类型。

import { Theme } from "@material-ui/core/styles/createMuiTheme";
import { createMuiTheme } from "@material-ui/core/styles";

declare module "@material-ui/styles" {
  interface DefaultTheme extends MyTheme {}
}

declare module "@material-ui/core/styles/createMuiTheme" {
  interface ThemeOptions extends MyTheme {}
}

export interface MyTheme extends Theme {
  backgroundColor: string;
}

const theme = createMuiTheme({
  backgroundColor: "red"
});

export { theme };

在你的组件中

const useStyles = makeStyles((theme) => ({
  childComp: {
    backgroundColor: theme.backgroundColor
  }
}));

现场演示

Answer 2

这经常发生在我身上。请尝试以下操作：

const useStyles = makeStyles(theme => ({
  childComp: {
    backgroundColor: theme.backgroundColor
  }
}));

注意( )

实时沙盒：https://stackblitz.com/edit/react-ts-e7vw8s?file=childComponent.tsx