未应用Reaction Material UI ThemeProvider [英] React Material UI ThemeProvider not being applied

问题描述

我正在使用@material-ui/core在我的Reaction应用程序中处理主题，但由于某些原因，某些样式未被应用。

这是我的sandboxWill的完整代码(下面是相关代码片段)。

我按照物料界面文档中的example操作，但似乎不起作用。

有趣的是，文本确实居中对齐(这是我在样式中指定的)，但背景颜色保持默认的#fafafa，而不是我的主题中指定的#424242。所以我猜样式正在应用，但我的主题没有应用到样式。

另一件奇怪的事是，我在makeStyles回调中注销了theme.palette.background.default的值，它是#424242。

另外，如果我将useStyles挂接中的backgroundColor的值设置为类似#f00的静态字符串，则它确实适用(背景颜色变为红色)。

使用样式挂钩：

const useStyles = makeStyles(
  (theme: Theme) =>
    createStyles({
      root: {
        backgroundColor: theme.palette.background.default,
        height: "100%",
        textAlign: "center",
        width: "100%"
      }
    }),
  { name: "App" }
);

App组件：

const App = () => {
  const classes = useStyles();
  return (
    <>
      <CssBaseline />
      <ThemeProvider theme={darkTheme}>
        <div className={classes.root}>hello</div>
      </ThemeProvider>
    </>
  );
};

主题

// NOTE: gray[800] = #424242
export const darkTheme = createTheme({
  palette: { background: { default: grey[800] } }
});

推荐答案

App(因此您的useStyles调用)在受您的黑暗主题ThemeProvider影响的元素层次结构之外。如果您将div放到它自己的组件中并从那里调用useStyles，它就可以正常工作。

import React from "react";

import CssBaseline from "@material-ui/core/CssBaseline";
import {
  makeStyles,
  createStyles,
  Theme,
  ThemeProvider
} from "@material-ui/core/styles";

import { darkTheme } from "./DarkTheme";

const useStyles = makeStyles(
  (theme: Theme) =>
    createStyles({
      root: {
        backgroundColor: theme.palette.background.default,
        height: "100%",
        textAlign: "center",
        width: "100%"
      }
    }),
  { name: "App" }
);

const Hello = () => {
  const classes = useStyles();
  return <div className={classes.root}>hello</div>;
};
const App = () => {
  return (
    <>
      <CssBaseline />
      <ThemeProvider theme={darkTheme}>
        <Hello />
      </ThemeProvider>
    </>
  );
};

export default App;

这篇关于未应用Reaction Material UI ThemeProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！