在 Material UI React js 中将文本对齐更改为居中答案

【问题标题】：Change the text align to center in Material UI React js在 Material UI React js 中将文本对齐更改为居中
【发布时间】：2020-11-30 14:47:28
【问题描述】：

在 Material UI 中，如何在排版中使文本居中。我正在尝试创建一个导航栏，以使用材质 UI 进行样式设置，我想将文本 hello world 居中。我已经尝试过内联样式和自定义主题，但没有一个对我有用。任何人都可以帮助我了解我缺少代码的地方。

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;

【问题讨论】：

标签： reactjs material-ui typography text-align

【解决方案1】：

在您的情况下，文本未居中，因为它没有完整宽度的可用空间你需要给排版样式flex-grow: 1，之后你会得到你想要的结果

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

【讨论】：