reactjs - React Material UI ThemeProvider tillämpas inte

Jag använder @material-ui/core för att hantera teman i min React-app, men av någon anledning tillämpas inte vissa av stilarna.

Här är min sandlåda med hela koden (relevanta utdrag nedan).

Jag följde exemplet i Material UIs dokumentation men det verkar inte fungera.

Det intressanta är att texten faktiskt centreras (vilket jag specificerade i mina stilar), men bakgrundsfärgen förblir standard #fafafa istället för #424242 som specificerat i mitt tema. Så jag antar att stilarna tillämpas men mitt tema tillämpas inte på stilarna.

En annan konstig sak är att jag loggade ut värdet av theme.palette.background.default inom makeStyles-callbacken och det var #424242.

Också, om jag sätter värdet på backgroundColor i useStyles-hooken till en statisk sträng som #f00, så tillämpas det (bakgrundsfärgen ändras till rött).

useStyles-hook:

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

App-komponent:

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

Tema

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

Svar #1

App (och därför ditt useStyles-anrop) ligger utanför elementhierarkin som påverkas av ditt mörka tema ThemeProvider. Om du flyttar din div till sin egen komponent och anropar useStyles därifrån, fungerar det bra.

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;

Svar #2

Jag fick det också att fungera genom att uppdatera dina makeStyles från att använda

createStyles({
      root: {
        backgroundColor: theme.palette.background.default,

till :

createStyles({
      root: {
      backgroundColor: darkTheme.palette.primary.main,

och ändrade darkTheme.ts

att följa deras nyckelord:

palette: {
    primary: { main: grey[800] }
  }

Här är den uppdaterade codesandbox: https://codesandbox.io/s/fancy-tdd-p35ld?file=/src/App.tsx