css - Material UI ReactJS如何在没有组件“移动”效果的情况下很好地对齐

Question

如何正确对齐垂直和水平中心：

右外有一个微调器

这是我的完整代码。

这在对齐时看起来并不漂亮，而且点击整个“移动”一点点

我是 ReactJS 和 Material UI 的新手。使用 Grid 和 Box 来对齐它，看起来有点“hacky”

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { withOktaAuth } from '@okta/okta-react';
import { CircularProgress } from '@material-ui/core';
import Fade from '@material-ui/core/Fade';
import Grid from '@material-ui/core/Grid';
import { Box, Button, TextField, Typography } from '@material-ui/core';
import APIClient from '../apiClient'


const classes = theme => ({
  buttonPadding: {
    padding: '30px',
  },
});

class StatusIcon extends React.Component {
  constructor(props) {

    super(props);
    this.logout = this.logout.bind(this);
    this.state = {
      status: "success",
      textFieldInput: ''
    }
  }

  async logout(e) {
    e.preventDefault();
    this.props.authService.logout('/');
  }

  handleTextFieldChange(e) {
    e.preventDefault();
    this.setState({
      textFieldInput: e.target.value,
    });
  }
  removeUser = async (id) => {
    const uuid = await this.apiClient.removeUser(id);
    console.log(uuid);
    this.intervalId = setInterval(() => this.loadData(uuid), 3000);
  }



  async handleSubmit(e) {
    e.preventDefault();
    console.log(this.state.textFieldInput);
    const accessToken = await this.props.authService.getAccessToken()
    this.apiClient = new APIClient(accessToken);
    this.removeUser(this.state.textFieldInput);


    this.setState({ status: "progress" });


  }



  async componentDidMount() {

  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }


  loadData = async (uuid) => {
    const taskstatus = await this.apiClient.checkStatus(uuid);
    console.log(taskstatus);
    if (taskstatus === 'success') {
      clearInterval(this.intervalId);

      //Inform parent component about status change 
      //Pass all required details from StatusIcon to parent component here
      this.setState({ status: "success" });

    }
  }



  render() {

    return (

      <Grid
        className={classes.root}
        spacing={0}
        alignItems="center"
        justify="center"
      >

        <Box
          display="flex"
          alignItems="center"
          p={1}
          m={1}
          bgcolor="background.paper"
          css={{ height: 100 }}
        >
          <Box p={1} >
            <TextField onChange={(e) => this.handleTextFieldChange(e)} label="ID or e-mail" variant="outlined" />

          </Box>
          <Box p={1} >
            <Button onClick={(e) => this.handleSubmit(e)} className={classes.buttonPadding} color="secondary" variant="contained">
              Submit
          </Button>
          </Box>
          <Box p={1} >
            {this.state.status === 'success' ?
              (
                <Typography></Typography>

              ) : (
                <Fade
                  in={this.state.status === 'progress'}
                  style={{
                    transitionDelay: this.state.status === 'progress' ? '800ms' : '0ms',
                  }}
                  unmountOnExit
                >
                  <CircularProgress />
                </Fade>
              )}



          </Box>
        </Box>
      </Grid>
    )

  }
}

export default withStyles(classes)(withOktaAuth(StatusIcon));

标签： cssreactjsmaterial-ui