Может ли кто-нибудь любезно помочь мне с позиционированием материала UI стиле - PullRequest
Новая
       17

Может ли кто-нибудь любезно помочь мне с позиционированием материала UI стиле

2 голосов
/ 25 июня 2019

enter image description here

Это изображение - то, что я сейчас получаю. Я хочу, чтобы иконка была расположена справа. Я сейчас использую материал-дизайн интерфейса. Как я могу это сделать? 

 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;

Ответы [ 3 ]

1 голос
/ 25 июня 2019

Я бы добавил класс на панель приложений, который дает ему направление изгиба строки, и добавил бы 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;
1 голос
/ 25 июня 2019

Demo App Bar

Вы можете видеть, как это работает здесь :

Вот фрагмент кода: 

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, чтобы оно росло, оставшееся пространство в контейнере распределяется поровну между всеми дочерними элементами.Вы можете узнать больше об этом здесь .

1 голос
/ 25 июня 2019

Это больше вопрос CSS, чем вопрос Material-UI.

Вы должны указать родителю, где значок и шрифт содержатся в следующих 2 правилах в css: 

display: flex,
justify-content: space-between

Если вам нужна дополнительная информация о flexbox, перейдите по ссылке по этой ссылке

...