React Material UI ListItemButton悬停选中框未适配Paper borderRadius问题

解法1：裁剪溢出内容（最简单快捷） #

直接在外层Paper组件添加overflow: 'hidden'样式，所有超出Paper圆角范围的内容都会被自动裁剪，悬停高亮的直角会直接被切掉适配外层圆角：

<Paper sx={{borderRadius: '25px', overflow: 'hidden'}}>
    <List component={Stack} direction="row">
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
    </List>
</Paper>

注意：这个方案会裁剪所有超出Paper范围的内容，如果你的菜单有向外延伸的阴影、弹出层等元素不适合被裁剪，可以用第二种方案

解法2：单独给首尾按钮设置圆角（更灵活，不裁剪外层内容） #

给第一个ListItemButton设置左圆角，最后一个设置右圆角，和外层Paper的圆角数值保持一致即可：

<Paper sx={{borderRadius: '25px'}}>
    <List component={Stack} direction="row">
        <ListItemButton sx={{borderTopLeftRadius: '25px', borderBottomLeftRadius: '25px'}}>
            <CropSquareRounded />
        </ListItemButton>
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
        <ListItemButton sx={{borderTopRightRadius: '25px', borderBottomRightRadius: '25px'}}>
            <CropSquareRounded />
        </ListItemButton>
    </List>
</Paper>

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