Question

我正在尝试关注this documentation。我正在尝试使“登录”按钮变为绿色，但是它似乎不继承给定代码的任何主题样式。不知道我在做什么错。

我有以下代码：

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

如果我要粘贴文档中的所有代码，那么我会看到每种颜色的三个按钮。但是我修改的代码不起作用。

Answer 1

您要放置Button的color="secondary"。创建调色板时，您正在为主要属性定义绿色。我在this sandbox中尝试过，将Button的颜色属性更改为color="primary"，并更改为绿色。

Answer 2

我假设你是说这个按钮？

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

Material-UI没有将颜色主题应用于按钮

2 个答案: