React Material 卡中的图标按钮

Question

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

    <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

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

React Material 卡中的图标按钮

Icon Button in React Material Card

css

reactjs

react-material