Reputation: 1045
I can not find a way to center the title in React Material UI AppBar. Maybe I am missing something. Few other answers are there on StackOverflow but those don't seem to be the best way.
Upvotes: 2
Views: 4044
Reputation: 5768
Use material-ui makeStyles to center the text:
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
title: {
flexGrow: 1,
textAlign: 'center',
},
}));
And than apply 'title' style to your title component:
export default function CenteredTextAppBar() {
const classes = useStyles();
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={classes.title}>
Centered Text
</Typography>
</Toolbar>
</AppBar>
</div>
);
}
You can refer to this CodeSandbox example.
Upvotes: 5