reactjs - React Material 如何主题化主体颜色

Question

有没有办法改变默认的主体颜色 在 react Material 中使用CssBaseline？

我不想使用类似

typography: {

    h2: {
      color: "red",
    },
  },

但是在全局范围内这可能吗？

我没有找到任何例子。

更新

它适用于

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        body: {
          backgroundColor: "red",
          color: "green",
        },
      },
    },
  },
});

注意你必须将 CssBaseline 嵌套到 MuiThemeProvider

<MuiThemeProvider theme={theme}>
    <CssBaseline />
    <App />
</MuiThemeProvider>

Answer 1

是的，兄弟，你可以在Material UI中全局覆盖所有东西，这里我全局写了一些Inputs，Buttons，Labels。

import React, { Component } from "react";
import { Box, CssBaseline } from "@material-ui/core";

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

import App from "../App";

class Layout extends Component {
  /**
   * Render
   */
  render() {
    const theme = createMuiTheme({
      palette: {
        secondary: {
          light: "green",
          main: "green",
          dark: "green",
          boxShadow: "none",
        },
        background: {
          default: "red",
        },
      },
    });

    return (
      <MuiThemeProvider theme={theme}>
        <CssBaseline />

        <Box component="div">
          <App />
        </Box>
      </MuiThemeProvider>
    );
  }
}

export default Layout;