reactjs - 反应材料如何主题化身体颜色

Question

有没有办法在反应材料中使用 CssBaseline 更改默认的主体颜色？

我不想使用 like

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

这是如何全局设置背景颜色的示例，类似地，您可以在主题中添加排版配置

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

    const theme = createMuiTheme({
      palette: {
        background: {
          default: "#303030"
        }
      }
    });
    function App() {
      return (
        <MuiThemeProvider theme={theme}>
          <React.Fragment>
            <CssBaseline />
            <Your Componennt />
          </React.Fragment>
        </MuiThemeProvider>
      );
    }

希望这对你有用:)

Answer 2

是的，兄弟，你可以在 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;