reactjs - 谁能帮我解决 Material ui 风格定位问题

Question

上图是我目前得到的。我希望将图标放置在右端。我现在正在使用material-ui设计。我怎样才能做到这一点？

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
 Grid, AppBar, Toolbar, Typography
 } from '@material-ui/core';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import Badge from '@material-ui/core/Badge';
 import IconButton from '@material-ui/core/IconButton';

class Appbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
   }
  }

  render() {
    const classes = makeStyles(theme => ({
      root: {
        flexGrow: 1,
      },
      title: {
        marginRight: theme.spacing(2),
      },
      cart: {
        flexGrow:1,
      },
   }));
    return (
      <div className={classes.root}>
       <AppBar position="static">
          <Typography className={classes.title} variant="h6">
            THIS IS IT
          </Typography>
            <IconButton className ={classes.cart} aria- 
  label="Cart">
          <Badge badgeContent={100} color="primary">
            <ShoppingCartIcon/>
          </Badge>
        </IconButton>
    </AppBar>
  </div>
    );
  }
}

export default Appbar;

Answer 1

您可以看到它正在运行 here :

这是代码片段:

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import MenuIcon from '@material-ui/icons/Menu';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  button: {
    marginRight: 6,
  },
  rightIcon: {
    marginLeft: theme.spacing.unit,
  },
});

class Appbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
   }
  }

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" className={classes.grow}>
            Demo
          </Typography>
          <Button
            color="inherit"
            className={classes.button}
          >
            <ShoppingCartIcon className={classes.rightIcon} />
          </Button>
        </Toolbar>
      </AppBar>
    </div>
    );
  }
}

export default withStyles(styles)(Appbar);

我为标题赋予了 flexGrow 属性以使其增长，容器中的剩余空间平均分配给所有子项。您可以了解更多here .