CSS 邊框折疊與 MUI 選項卡

Question

在這張圖片中，#1 是我需要的常規邊框。 #2 和 #3 是 #1 的兩倍。 在#4 中，我們可以看到它的發生是因為附近的兩個元素都有邊框並且沒有折疊。

在我的 React / MUI 項目中，我添加了borderCollapse: "collapse" 。 但是，問題仍然存在。

這是我的代碼沙箱

我的代碼出了什么問題？

Answer 1

選項卡中的每個項目都有自己的邊框，這就是為什么它之間的元素看起來是雙倍的。

我能找到的代碼較少的最接近的解決方案是在每個項目中添加負margin-left ，除了第一個項目，如下面的代碼。 這是工作代碼和框

    <Tabs
              value={value}
              onChange={handleChange}
              centered
              variant="fullWidth"
              aria-label="basic tabs example"
              sx={{
                ".MuiButtonBase-root": {
                  color: "white",
                  textTransform: "none",
                  borderCollapse: "collapse",
                  border: "1px solid #83858E",
                  fontWeight: "normal",
                  marginLeft: "-1px" // You add negative margin
                },
                "& :first-child": {
                  borderTopLeftRadius: "0.5rem",
                  borderBottomLeftRadius: "0.5rem",
                  margin: "0" // You remove the negative margin-left for the first element.
                },
                "& :last-child": {
                  borderTopRightRadius: "0.5rem",
                  borderBottomRightRadius: "0.5rem"
                },
                "& .MuiTabs-indicator": {
                  display: "none"
                },
                "& .MuiTab-root.Mui-selected": {
                  color: "black",
                  backgroundColor: "#ABA9FF",
                  border: "1px solid white"
                }
              }}
            >