Question

是否可以更改默认的车身颜色在反应材料中使用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

是的，兄弟，您可以在材质UI中全局覆盖所有内容，在这里我全局编写一些输入，按钮和标签。

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;

Answer 2

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

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

希望这对您有用：）

反应材质如何设定主体颜色

更新

2 个答案: