css - React Material Card 中的图标按钮

Question

我正在尝试将编辑图标按钮放在卡片的右侧。我想实现如下图所示。请查看此沙箱链接以获取我当前的输出

单击此处获取图像链接

单击此处获取沙盒链接

    <CardHeader
          classes={{
            title: classes.title
          }}
          className={classes.cardHeader}
          title={"John Smith"}
          subheader={
            <h2 style={{ color: "white", textAlign: "center" }}>
              User
            </h2>
          }
        />
        <Button
          variant="contained"
          color="secondary"
          className={classes.editButton}
          startIcon={<EditIcon />}
        />

Answer 1

https://codesandbox.io/s/material-demo-ghtlj?file=/demo.js

我将按钮移动到卡片内容并为其设置绝对位置。然后父级相对定位，样式很少。