Material-UI 排版不在工具栏中居中答案

【问题标题】：Material-UI Typography doesn't center in Tool BarMaterial-UI 排版不在工具栏中居中
【发布时间】：2020-06-01 14:49:50
【问题描述】：

我正在尝试将 AppBar 中的文本居中。我尝试使用 align="center", textAlign="center" 和 style={{ align: "center" }}, justify ="center" 使 Typography 元素中的文本居中，但它仍然不起作用。如何使文本居中？

              return (
               <MuiThemeProvider theme={theme}>
               <React.Fragment>
              <div alignItems="center" justify="center">
               <AppBar position="static">
                 <Toolbar>
                 <Typography style={{ align: "center" }}>
                  Best Practices Management System
                  </Typography>
                  </Toolbar>
                  </AppBar>
                   </div>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

材料本身的排版作为道具对齐

<Typography align='center'>
    Best Practices Management System
</Typography>

【讨论】：

嗨，我知道它有，但那不起作用文本仍然是向左而不是中心
你能检查一下排版的宽度吗？如果是文字宽度本身那么对齐不会有任何效果
不，我尝试了较小的文本，仍然与左侧对齐

【解决方案2】：

align='center' 应该是解决方案，但您必须使用父元素的 100% 宽度。

更新：

import React from 'react';
import Typography from '@material-ui/core/Typography';
import {makeStyles} from '@material-ui/core/styles';
import {MuiThemeProvider} from "@material-ui/core";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar"
import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const useStyles = makeStyles({
    root: {
        width: '100%',
        maxWidth: 500,
    },
});


const theme = createMuiTheme({
  palette: {
    primary: blue,
  },
});

export default class TypographyExamples extends React.Component {
    render() {
        const {values, handleChange} = this.props;
        return (
            <MuiThemeProvider theme={theme}>
                <React.Fragment>
                    <div className={useStyles.root}>
                        <AppBar position="static">
                            <Toolbar>
                                <Typography gutterBottom align="center" style={{width: "100%", alignItems: "center"}}> abc </Typography>
                            </Toolbar>
                        </AppBar>
                    </div>
                </React.Fragment>
            </MuiThemeProvider>
        );
    }
}

Please check this Code Sandbox

【讨论】：

当我使用 const classes = useStyles();在渲染下它会给出一个错误 Invalid hook call。
我的代码是这样的 render() { const { values, handleChange } = this.props; return (
abc