CODEWITHSUNDEEP
javascriptreactjsmaterial-designmaterial-ui
mevrick
mevrick

Reputation: 1045

How to horizontal center the title in Material-UI AppBar

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

Answers (1)

Ido
Ido

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

Related Questions