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"
                }
              }}
            >