谁能帮我解决 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

这更像是一个 CSS 问题而不是 Material-UI 问题。

你应该在css中给图标和字体包含以下2条规则的父级：

display: flex,
justify-content: space-between

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

Answer 2

我会在应用栏中添加一个 class 以赋予其行弹性方向，并添加一个 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 属性让它成长，容器中剩余的 space 平均分配给所有 children。您可以了解更多 here.

谁能帮我解决 material ui 样式定位问题

could anyone kindly help me out with material ui style positioning

web-frontend

reactjs

material-ui