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

Question

Above image is what I'm currently getting. I want the icon to be placed at the right-hand end. I'm using material-ui design right now. How can I do this?

 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

You can see it working here :

Here is the code snippet:

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);

I gave flexGrow property to the title to let it grow, remaining space in the container is distributed equally to all children. You can learn more about it here .

Answer 2

This is more of a CSS question than a Material-UI question.

You should give the parent where the icon and font are contained the following 2 rules in css:

display: flex,
justify-content: space-between

If you want more information about flexbox, go to this link

Answer 3

I would add a class to the appbar that gives it row flex direction and add a div to help with the spacing. The final solution should look something like this:

 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;