如何将MUI Select的边框延伸包裹相邻的IconButton组件

实现方案一（推荐，完全符合MUI原生交互规范） #

你可以直接把排序切换的IconButton放到Select组件的endAdornment属性中，这样Select自带的外框会自然包裹住按钮，同时保留标签预留缺口、悬停高亮、聚焦态等原生行为，不会出现边框叠加的问题。

修改后的完整代码如下：

import InputAdornment from '@mui/material/InputAdornment';

// 组件内部代码
return (
    <FormControl sx={{ minWidth: "220px", mt: 1, bgcolor: "#fefcf9" }} >
        <InputLabel id="arrange-by-label">Arrange By</InputLabel>
        <Select
            labelId="arrange-by-label"
            id="arrange-by"
            value={litTextsOrder}
            label="Arrange By"
            onChange={handleLitTextsOrder}
            sx={{ 
                bgcolor: "#fefcf9", 
                // 增加右侧内边距，避免选项文字遮挡按钮
                pr: 1 
            }}
            // 把IconButton放到后缀装饰位
            endAdornment={
                <InputAdornment position="end" sx={{ mr: -0.5 }}>
                    <IconButton edge="end">
                        <CompareArrowsIcon sx={{ transform: "rotate(90deg)"}}/>
                    </IconButton>
                </InputAdornment>
            }
        >
            {valuesArr.map((valueArr, index) => {
                return (
                    <MenuItem 
                        key={index} 
                        value={valueArr[0]}
                    >
                        {valueArr[1]} 
                    </MenuItem>
                )
            })}
        </Select>
    </FormControl>
)

该方案优势：

• 完全复用MUI Select原生的边框、标签缺口、悬停/聚焦高亮逻辑，不需要手动写边框样式
• 两个控件的交互态完全统一，悬停整个组件区域都会触发边框高亮
• 没有额外的DOM层级，代码更简洁

实现方案二（自定义边框适配原有结构） #

如果不想改动原有DOM结构，可以手动拆分边框显示：

1. 隐藏Select组件的右侧边框
2. 给包裹IconButton的Box添加上、右、下三边边框，和Select边框样式完全对齐
3. 给外层Paper添加统一的悬停事件，同步修改两个元素的边框高亮状态

样式调整参考代码：

return (
    <FormControl sx={{ minWidth: "220px", mt: 1, }} >
        <Paper 
            sx={{ 
                bgcolor: "#fefcf9", 
                display: "flex",
                alignItems: "center",
                // 悬停时统一修改子元素边框颜色
                "&:hover .select-border": {
                    borderColor: "primary.main"
                },
                "&:hover .btn-box-border": {
                    borderColor: "primary.main"
                }
            }}
        >
            <InputLabel id="arrange-by-label" sx={{ zIndex: 1, bgcolor: "#fefcf9", px: 0.5 }}>Arrange By</InputLabel>
            <Select
                labelId="arrange-by-label"
                id="arrange-by"
                value={litTextsOrder}
                label="Arrange By"
                onChange={handleLitTextsOrder}
                className="select-border"
                sx={{ 
                    bgcolor: "#fefcf9", 
                    minWidth: "132px",
                    // 隐藏右侧边框
                    borderRight: 0,
                    borderTopRightRadius: 0,
                    borderBottomRightRadius: 0,
                    // 取消原生悬停边框逻辑，用外层统一控制
                    "&:hover fieldset": {
                        borderColor: "inherit !important"
                    },
                    "& fieldset": {
                        borderRight: "none !important"
                    }
                }}
            >
                {/* 原有选项逻辑不变 */}
            </Select>
            <Box 
                component="span"
                className="btn-box-border"
                sx={{
                    height: "100%",
                    display: "flex",
                    alignItems: "center",
                    border: "1px solid rgba(0,0,0,0.23)",
                    borderLeft: 0,
                    borderTopRightRadius: "4px",
                    borderBottomRightRadius: "4px",
                    pl: 0.5,
                    pr: 1
                }}
            >
                <IconButton>
                    <CompareArrowsIcon sx={{ transform: "rotate(90deg)"}}/>
                </IconButton>
            </Box>
        </Paper>
    </FormControl>
)

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