如何让Material-UI IconButton的右侧边框为直角而非圆角？

默认情况下，Material-UI的IconButton组件自带圆角样式（继承自主题的shape.borderRadius），所以当你给它添加borderRight时，边框会跟着按钮的圆角呈现弧形。要改成直角边框，只需要在sx属性中覆盖圆角相关样式即可。

方案一：完全设置为直角边框 #

直接将borderRadius设为0，让按钮整体变成直角，边框自然同步为直角样式：

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

方案二：仅让右侧边框为直角（保留左侧圆角） #

如果希望按钮左侧仍保留原有圆角，只针对右侧边框做直角处理，可以单独设置右侧的圆角属性为0：

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

原理说明 #

Material-UI的sx属性支持直接覆盖组件的内联样式，borderRadius或细分的borderTopRightRadius等属性会优先于主题默认样式生效，从而快速实现直角边框的需求。

内容的提问来源于stack exchange，提问作者max_