Материал-UI настройки цвета - PullRequest
Новая
       9

Материал-UI настройки цвета

0 голосов
/ 04 марта 2019

Я пытаюсь изменить цвет фона моей бумаги для нижнего колонтитула, используя material-ui с React.Я следовал демонстрационной демонстрации цвета с помощью createMuiTheme, а затем использовал MuiThemeProvider, но это не сработало.Нужно ли использовать Drawer, чтобы заставить это работать?

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;

1 Ответ

0 голосов
/ 04 марта 2019

У вас есть две проблемы:

  1. Вы предоставили MuiThemeProvider, но он не включает Paper.Но вы хотите изменить стиль Paper.Вы должны убедиться, что MuiThemeProvider является родителем компонентов, которые вы пытаетесь настроить. См. Документы .
  2. Paper. На цвет фона palette.primary или palette.secondary не влияет.Это берет цвет от palette.background.paper.См. тему по умолчанию здесь .

Вот демонстрационная версия, надеюсь, она поможет. 

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>
...