排版旁边的按钮

Question

如何在纸容器内的排版标签旁边放置一个按钮，使其与 right/end 对齐？

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

我正在使用 Typography 的 inline 属性，但按钮继续在下一行...非常感谢，我是新手。

Answer 1

如果您不介意添加更多 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'
}

排版旁边的按钮

Button next to Typography

typography

reactjs

material-design

material-ui