css - 如何在 MUI 中设置 body 元素的样式

Question

我找不到任何使用 ThemeProvider 定位根元素的方法来自 MUI。

const theme = createMuiTheme({
  palette: {
    background: {
      default: "#00000",
      backgroundColor : 'black',
      backgroundImage: 'url(/bg.jpg)',
      backgroundPosition: 'center',
      height:'100%'
    },
    primary: {
      light: '#757ce8',
      main: '#fff',
      dark: '#002884',
      contrastText: 'grey',
    },
  },
});

Answer 1

Material-UI v5
您可以通过覆盖 MuiCssBaseline 来更改正文样式createTheme() 中的样式:

import CssBaseline from "@mui/material/CssBaseline";
import darkScrollbar from "@mui/material/darkScrollbar";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          ...darkScrollbar(),
          color: "darkred",
          backgroundColor: "grey",
          "& h1": {
            color: "black"
          }
        }
      }
    }
  }
});

export default function GlobalCssOverride() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Content />
    </ThemeProvider>
  );
}

Material-UI v4
您可以将样式应用于 body使用 @global class 像这样:

const useGlobalStyles = makeStyles({
  "@global": {
    body: {
      backgroundColor: "tomato"
    }
  }
});
const theme = createMuiTheme({});

function MyThemeProvider({ children }) {
  useGlobalStyles();
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

function App() {
  return (
    <MyThemeProvider>
      <Button variant="contained" color="primary">
        Button
      </Button>
    </MyThemeProvider>
  );
}

如果您通过 create-react-app 创建元素，您还可以使用 css/scss 模块来全局设置任何元素的样式:

/* styles.css */
body {
  color: white;
  font-size: 15px;
}

import React from "react";
import Button from "@material-ui/core/Button";
import "./styles.css";

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

现场演示