样式 MUI 选项卡，如 Bootstrap 导航选项卡答案

【问题标题】：Style MUI Tabs like Bootstrap Nav Tabs样式 MUI 选项卡，如 Bootstrap 导航选项卡
【发布时间】：2022-06-17 18:41:54
【问题描述】：

我正在尝试设置 Material UI 选项卡的样式，例如 Bootstrap Tabs。我确实将它更改了 90%，但我无法让 activeTab 上的边框底部消失。 Bootstrap 在活动选项卡上执行 marginBottom: -1px 但是当我这样做时，什么也没有发生。请帮忙。

import * as React from "react";
import { styled } from "@mui/material/styles";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";

const AntTabs = styled(Tabs)({
  borderBottom: "1px solid #dee2e6",
  "&.Mui-selected": {
    color: "#495057",
    backgroundColor: "#fff",
    borderColor: `#dee2e6 #dee2e6 #fff`,
    marginBottom: "-1px"
  },
  "& .MuiTabs-indicator": {
    display: "flex",
    justifyContent: "center",
    backgroundColor: "transparent"
  }
});

interface StyledTabProps {
  label: string;
  disabled?: boolean;
}

const StyledTab = styled((props: StyledTabProps) => (
  <Tab disableRipple {...props} />
))(({ theme }) => ({
  textTransform: "none",
  fontWeight: theme.typography.fontWeightRegular,
  fontSize: theme.typography.pxToRem(15),
  marginRight: theme.spacing(1),
  color: "#0d6efd",
  marginBottom: "-1px",
  background: "0 0",
  border: "1px solid transparent",
  borderTopLeftRadius: "0.25rem",
  borderTopRightRadius: "0.25rem",
  padding: ".5rem 1rem",
  textDecoration: "none",
  transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
  "&.Mui-selected": {
    color: "#495057",
    backgroundColor: "#fff",
    borderColor: "#dee2e6 #dee2e6 #fff"
  },
  "&.Mui-focusVisible": {
    backgroundColor: "rgba(100, 95, 228, 0.32)"
  }
}));

export default function CustomizedTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: "100%" }}>
      <Box>
        <AntTabs
          value={value}
          onChange={handleChange}
          aria-label="styled tabs example"
        >
          <StyledTab label="Workflows" />
          <StyledTab label="Datasets" />
          <StyledTab label="Connections" disabled />
        </AntTabs>
      </Box>
    </Box>
  );
}

这是我的沙盒link。

这是我得到的：

请帮忙。

这是我的代码：

【问题讨论】：

标签： css reactjs twitter-bootstrap material-ui

【解决方案1】：

请参阅此答案以供参考：https://*.com/a/60926017/9122129

我们需要让活动选项卡溢出它的父组件，这在 MUI 中有点棘手。

  overflow: "visible!important",
  "& div.MuiTabs-scroller": {
    overflow: "visible!important"
  },

似乎我们需要将活动按钮向下推 2px 才能获得所需的效果。

这是一个工作演示：https://codesandbox.io/s/customizedtabs-material-demo-forked-obwx37?file=/demo.tsx

【讨论】：