材质-ui颜色定制答案

【问题标题】：Material-ui color customization材质-ui颜色定制
【发布时间】：2019-07-25 11:32:35
【问题描述】：

我正在尝试使用 Material-ui 和 React 更改我的页脚的纸张背景颜色。我使用 createMuiTheme 跟随颜色示例演示，然后使用 MuiThemeProvider，但它不起作用。我需要使用抽屉来让它工作吗？

import React from 'react';
import Link from 'react-router-dom';
import Paper from '@material-ui/core/Paper';
import CssBaseline from '@material-ui/core/CssBaseline';
import { createMuiTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import green from '@material-ui/core/colors/green';

 const style = {
  textAlign: 'center'
}

 const theme = createMuiTheme({
  palette: {
   primary: green,
   secondary: {
     main: '#2e7d32',
   },
  },
 });


 const Footer = () => {
    return(
     <React.Fragment>
       <CssBaseline />
        <Paper style={style} elevation={1}>
         <MuiThemeProvider theme = {theme}>
          <h2>Copywright Medicinal Foods 2019!</h2>
            <h3>All Rights Reserved!</h3>
              <h4>Thanks for visitng!</h4>
                <br></br>
                  <br></br>
                    <br></br>
                   </MuiThemeProvider>
                  </Paper>
                </React.Fragment>
   );
 }

 export default Footer;

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你有两个问题：

您提供了MuiThemeProvider，但它没有包装Paper。但是您想更改Paper 的样式。您必须确保 MuiThemeProvider 是您尝试自定义的组件的父级。 See docs。
Paper 的背景颜色不受palette.primary 或palette.secondary 的影响。它采用palette.background.paper 的颜色。请参阅default theme here。

这是一个演示，希望对您有所帮助。

const {createMuiTheme, green, CssBaseline, Paper, MuiThemeProvider
} = window['material-ui'];

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
  palette: {
   background: {paper: '#5fba7d'}
  },
});

 const Footer = () => {
    return(
     <React.Fragment>
       <CssBaseline />
       <MuiThemeProvider theme={theme}>
        <Paper elevation={1}>
          <h2>Copywright Medicinal Foods 2019!</h2>
          <h3>All Rights Reserved!</h3>
          <h4>Thanks for visitng!</h4>
        </Paper>
      </MuiThemeProvider>
     </React.Fragment>
   );
 }

ReactDOM.render(<Footer />, document.getElementById('root'));

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="root"></div>

【讨论】：