在另一個元素周圍擴展 MUI Select 的邊框

Question

我有一個使用 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>
)

我試着只移動里面的 ，但這當然沒有用。 謝謝大家的幫助！

Answer 1

您可以使用做到這一點的目標下一個元素& + 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"
    }
  }}
>