任何人都可以在用户界面风格定位方面帮助我

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

与Material-UI问题相比，这更多是CSS问题。

您应在css中给父图标和字体包含以下2条规则的地方：

display: flex,
justify-content: space-between

如果您想了解有关flexbox的更多信息，请转到this link

Answer 2

我会在appbar中添加一个类，为它提供行弹性方向，并添加一个div以帮助间距。最终的解决方案应如下所示：

 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),
      },
      appBar: {
        display: 'flex',
      }
      spacer: {
        flexGrow: 1,
      },
      cart: {
        flexGrow:0,
      },
   }));
    return (
      <div className={classes.root}>
       <AppBar position="static" className={classes.appBar}>
          <Typography className={classes.title} variant="h6">
            THIS IS IT
          </Typography>
          <div className={classes.spacer}/>
          <IconButton className ={classes.cart} aria- 
  label="Cart">
          <Badge badgeContent={100} color="primary">
            <ShoppingCartIcon/>
          </Badge>
        </IconButton>
    </AppBar>
  </div>
    );
  }
}

export default Appbar;

Answer 3

您可以看到它正常工作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。