CODEWITHSUNDEEP
reactjsmaterial-uitypographytext-align
Affy
Affy

Reputation: 191

Change the text align to center in Material UI React js

In material UI, how to center the text in typography. I am trying to create a navbar in react with using material UI for styling, where I want to center the text hello world. I have tried both inline styling and customizing the theme but none worked for me. Can anyone help me understand where I am missing the code.

import React, { Fragment } from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  Box,
  Avatar,
  Link,
} from '@material-ui/core';
import IconButton from '@material-ui/core/Icon';
import { ArrowBack } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  appbarStyle: {
    fontStyle: 'oblique',
  },
  arrowbackStyle: {
    color: '#8b0e3a',
    background: '#ffffff',
  },
  typographyStyle: {
    color: '#8b0e3a',
  },
  womenLink: {
    color: 'white',
    marginLeft: '10px',
  },
});

const NavigationBar = () => {
  const classes = useStyles();
  return (
    <Fragment>
      <Box>
        <Avatar src='' alt='logo' />
      </Box>
      <Box component='nav'>
        <AppBar position='static' className={classes.appbarStyle}>
          <Toolbar>
            <IconButton>
              <ArrowBack className={classes.arrowbackStyle} />
            </IconButton>
            <Link className={classes.womenLink} href='#'>
              link1
            </Link>
            <Typography
              variant='h5'
              className={classes.typographyStyle}
              justify='center'
              align='center'
            >
              Hello world
            </Typography>
          </Toolbar>
        </AppBar>
      </Box>
    </Fragment>
  );
};

export default NavigationBar;

Upvotes: 0

Views: 2732

Answers (1)

Hovakimyan
Hovakimyan

Reputation: 558

In your case text is not centered as it hasn't full width of free space you need to give flex-grow: 1 to typography styles, after which you will get your wanted result

  typographyStyle: {
    flexGrow: 1,
    color: "#8b0e3a"
  },

Upvotes: 1

Related Questions