Question

我正在尝试将文本放在AppBar中。我尝试使用align =“ center”，textAlign =“ center”和style = {{align：“ center”}}，居中=“ 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>

Answer 1

材料本身的版式与prop对齐

In[1]:  reorder(10,1)
Out[1]: [[4, 0, 1, 2, 3], [9, 5, 6, 7, 8]]

Answer 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

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

2 个答案: