如何在 Material UI 中设置 body 元素的样式

Question

我找不到任何方法使用ThemeProviderMaterial UI 来定位根元素。

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

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

材质 UI v4

您可以将样式应用到bodyusing中@global class，如下所示：

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

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

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

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

现场演示