Кнопка рядом с типографикой - PullRequest
Новая
       29

Кнопка рядом с типографикой

0 голосов
/ 10 июня 2019

Как разместить кнопку рядом с типографским тегом внутри бумажного контейнера, выровненную по правому краю? 

<div className={classes.root}>
    <Grid container spacing={3}>
      <Grid item xs={12} md={6}>
        <Paper className={classes.paper}>
          <Typography inline>CPU</Typography>
          <IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
        </Paper>
      </Grid>
</div>

Вот мои стили: 

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    padding: theme.spacing(2),
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
  }
}));

Я использую атрибут inline в типографии, но кнопка продолжает переходить на следующую строку ... большое спасибо, я новичок.

1 Ответ

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

Если вы не против добавить больше элементов dom. 

<div className={classes.root}>
    <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
            <Paper className={classes.paper}>
                <Grid container alignContent="space-between" alignItems="center">
                    <Grid item>
                        <Typography inline>CPU</Typography>
                    </Grid>
                    <Grid item>
                        <IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
                    </Grid>
                </Grid>
            </Paper>
        </Grid>
</div>

В противном случае вы можете просто изменить свойства CSS 

paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
    display: flex,
    alignContent: 'space-between',
    alignItems: 'center'
}
...