使用 Gatsby + Material UI。试图制作一个导航栏，但按钮居中。我究竟做错了什么？

Question

我用谷歌搜索了几个小时，但我找不到任何东西。

这是我的 Navbar 组件代码：

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(() => ({
    toolbar: {
        textAlign: "center",
    },
    root: {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
        border: 0,
        borderRadius: 3,
        boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
        color: "white",
        height: 48,
        padding: "0 30px",
    },
}));

const NavBar = () => {
    const classes = useStyles();

    return (
        <div>
            <AppBar position="static" color="secondary" elevation={0}>
                <Toolbar className={classes.toolbar}>
                    <Button className={classes.root}>Hook</Button>
                </Toolbar>
            </AppBar>
        </div>
    );
};

export default NavBar;

如你所见，重要的部分是<Toolbar className={classes.toolbar}>，因为它指的是js样式textAlign: "center"中的css。我的结果是按钮在左侧，而不是中间。这是一张图片：

Picture

Answer 1

Junaid已经解决了，toolbar:应该是：

toolbar: {
    dislay: "flex",
    justifyContent: "center"
  },

它使用 flexbox 以方便布局。 css-tricks.

上有更多内容

使用 Gatsby + Material UI。试图制作一个导航栏，但按钮居中。我究竟做错了什么？

Using Gatsby + Material UI. Trying to make a navbar but with the buttons centered. What am I doing wrong?

material-ui

gatsby

css-in-js