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

Posted 2023-02-22

【中文标题】反应材料如何主题化身体颜色

【英文标题】：React material how to theming body color

【发布时间】：2020-09-02 04:51:26

【问题描述】：

有没有办法改变默认的正文颜色 在反应材料中使用 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>

【参考方案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>
      );
    

希望这对你有用:)

【讨论】：

color: default: "#303030" 不起作用:)

你能试试这个 const theme = createMuiTheme( palette: background: paper: '#303030' );

【参考方案2】：

是的，兄弟，你可以在material UI中全局覆盖一切，这里我写一些全局的Inputs、Buttons、Label。

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;

【讨论】：

我已经用正确的答案更新了我的问题，感谢同样的帮助