reactjs 如何使图标的右边框不是圆的而是直的

5lhxktic 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(189)

在这个项目中我使用了material-ui。在标题中添加了图标。前两个图标需要添加右边框。现在的问题是它是圆的，如下图所示，我需要一个直边框。我该怎么做呢？

<Box sx={{ flexGrow: 0 }}>
            <Tooltip title="Favorites">
              <IconButton sx={{ p: 2, borderRight: 1 }}>
                <FavoriteIcon alt="Favorite" />
              </IconButton>
            </Tooltip>
            <Tooltip title="My Profile">
              <IconButton sx={{ p: 2, borderRight: 1 }}>
                <PersonIcon alt="Profile" />
              </IconButton>
            </Tooltip>
            <Tooltip title="Notifications">
              <IconButton sx={{ p: 2 }}>
                <NotificationsIcon alt="Notifications" />
              </IconButton>
            </Tooltip>
          </Box>

reactjs

来源：https://stackoverflow.com/questions/74828169/how-to-make-the-icons-border-right-not-round-but-straight

1条答案

按热度按时间

plicqrtu1#

如果您只需要在每个按钮之间画一条线，请查看MUI中的Divider组件。

<Box sx={{ flexGrow: 0 }}>
    <Tooltip title="Favorites">
      <IconButton sx={{ p: 2, borderRight: 1 }}>
        <FavoriteIcon alt="Favorite" />
      </IconButton>
    </Tooltip>
    <Divider orientation="vertical" flexItem />
    <Tooltip title="My Profile">
      <IconButton sx={{ p: 2, borderRight: 1 }}>
        <PersonIcon alt="Profile" />
      </IconButton>
    </Tooltip>
    <Divider orientation="vertical" flexItem />
    <Tooltip title="Notifications">
      <IconButton sx={{ p: 2 }}>
        <NotificationsIcon alt="Notifications" />
      </IconButton>
    </Tooltip>
  </Box>

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 如何使图标的右边框不是圆的而是直的

1条答案

相关问题

热门标签

最新问答