[英]Extend the border of MUI Select around another element
我有一个使用 MUI Select 排序的下拉菜单(AZ,最新-最旧),旁边有一个按钮可以反转方向(ZA,最旧-最新)。 是否可以在IconButton
周围扩展 Select 的边框(悬停时变暗)?
这是当前发生的情况的 gif:悬停时边框突出显示,但当光标移动到 button 时恢复正常。
如果我只是将两个元素都更改为variant="outlined"
,则轮廓会直接穿过 Select 的标签,而 Select 的轮廓会为标签留下间隙:
如果无法在按钮周围扩展 Select 的轮廓,那么我可以在整个元素周围创建一个新的边框,该边框在悬停时具有相同的行为 - 但不会将 Select 周围的边框宽度加倍吗? 或者我可以在里面有 IconButton 的小块的三个边周围做一个边框吗? 我该怎么做?
这是该组件的代码的相关部分:
return (
<FormControl sx={{ minWidth: "152px", mt: 1, }} >
<Paper sx={{ 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", minWidth: "132px" }}
>
{valuesArr.map((valueArr, index) => {
return (
<MenuItem
key={index}
value={valueArr[0]}
>
{valueArr[1]}
</MenuItem>
)
})}
</Select>
<Box component="span">
<IconButton>
<CompareArrowsIcon sx={{ transform: "rotate(90deg)"}}/>
</IconButton>
</Box>
</Paper>
</FormControl>
)
我试着只移动里面的 ,但这当然没有用。 谢谢大家的帮助!
您可以使用做到这一点的目标下一个元素& + span
选择,删除的边框右边框Select
和添加边框除了左侧旁的按钮Select
。 悬停颜色不在主题中,它在这一行硬编码,因此您还必须复制它。
const theme = useTheme();
const hoverColor =
theme.palette.mode === "light"
? "rgba(0, 0, 0, 0.23)"
: "rgba(255, 255, 255, 0.23)";
const activeColor = theme.palette.primary.main;
<Select
label="Arrange By"
sx={{
bgcolor: "#fefcf9",
minWidth: "132px",
"& fieldset": {
borderTopRightRadius: 0,
borderBottomRightRadius: 0
},
"&&:hover fieldset": {
borderRight: "none",
borderLeft: `solid 1px ${hoverColor}`,
borderTop: `solid 1px ${hoverColor}`,
borderBottom: `solid 1px ${hoverColor}`
},
"&&.Mui-focused fieldset": {
borderRight: "none",
borderLeft: `solid 1px ${activeColor}`,
borderTop: `solid 1px ${activeColor}`,
borderBottom: `solid 1px ${activeColor}`
},
"& + span": {
display: "flex",
borderRadius: theme.shape.borderRadius + "px",
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
"& button": {
height: "100%"
}
},
"&:hover + span": {
borderColor: hoverColor,
border: `solid 1px ${hoverColor}`,
borderLeft: "none"
},
"&.Mui-focused + span": {
borderColor: activeColor,
border: `solid 1px ${activeColor}`,
borderLeft: "none"
}
}}
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.