I've spent hours searching on Google, but I haven't been able to find a solution.
Below is the code for my Navbar component:
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;
The key part of this code is
<Toolbar className={classes.toolbar}>textAlign: "center". However, despite this, the button appears on the left side instead of the center. You can see it in this picture.