Material-UI не применяет цветовую тему к кнопке, как это должно быть - PullRequest
Новая
       9

Material-UI не применяет цветовую тему к кнопке, как это должно быть

2 голосов
/ 05 июня 2019

Я пытаюсь следовать этой документации .Я пытаюсь получить зеленую кнопку «Вход», но кажется, что она не наследует стили темы с данным кодом.Не уверен, что я делаю неправильно.

У меня есть следующий код: 

 import React from "react";
 import {
      createMuiTheme,
      withStyles,
      makeStyles
 } from "@material-ui/core/styles";
 import { ThemeProvider } from "@material-ui/styles";
 import green from "@material-ui/core/colors/green";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";

 import { Link } from "react-router-dom";

 const useStyles = makeStyles(theme => ({
      root: {
           flexGrow: 1
      },
      menuButton: {
           marginRight: theme.spacing(2)
      },
      title: {
           flexGrow: 1
      }
 }));

 const theme = createMuiTheme({
      palette: {
           primary: green
      }
 });

 export default function ButtonAppBar() {
      const classes = useStyles();

      return (
           <div className={classes.root}>
                <AppBar position="static">
                     <Toolbar>
                          <IconButton
                               edge="start"
                               className={classes.menuButton}
                               color="inherit"
                               aria-label="Menu"
                          >
                               <MenuIcon />
                          </IconButton>
                          <Typography variant="h6" className={classes.title}>
                               Hello
                          </Typography>
                          <ThemeProvider theme={theme}>
                               <Link to="/login">
                                    <Button color="secondary">Login</Button>
                               </Link>
                          </ThemeProvider>
                     </Toolbar>
                </AppBar>
           </div>
      );
 }

Если бы я вставил весь код из документации, то я бы увидел три кнопкикаждого цвета.Но мой вариант кода не работает.

Ответы [ 2 ]

1 голос
/ 05 июня 2019

Я предполагаю, что вы имеете в виду эту кнопку? 

<Link to="/login">
    <Button color="secondary">Login</Button>
</Link>

Если это так, вам нужно установить его в Первичный, а не вторичный. Вам нужно, чтобы он был также включен в themeProvider. Если вы посмотрите на пользовательский код в этом документе, который вы разместили, вы должны увидеть это 

<ThemeProvider theme={theme}>
        <Button variant="contained" color="primary" className={classes.margin}>
          Theme Provider
        </Button>
      </ThemeProvider>

Должно соответствовать тому, что вы используете в createMuiTheme: 

const theme = createMuiTheme({
      palette: {
           primary: green
      }
 });
1 голос
/ 05 июня 2019

Вы ставите кнопку color="secondary".При создании палитры вы определяете зеленый цвет для основного атрибута.Я попытался в этой песочнице изменить цвет кнопки на color="primary", и он изменился на зеленый.

...