文章/答案/技术大牛

发布

社区首页 >问答首页 >样式的MUI Tabs，如Bootstrap Nav Tabs

问样式的MUI Tabs，如Bootstrap Nav Tabs
EN

Stack Overflow用户

提问于 2022-03-23 14:30:13

回答 1查看 496关注 0票数 0

我正在尝试样式的材料UI表格，如引导选项卡。我确实把它修改了90%，但我无法让activeTab上的边界底部消失。引导程序在active选项卡上执行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>
  );
}

这是我的沙箱链接。

我得到的是：

请帮帮忙。

这是我的密码：

css

reactjs

twitter-bootstrap

material-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-17 10:41:54

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <script
      src="https://unpkg.com/react@latest/umd/react.development.js"
      crossorigin="anonymous"
      ></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script
      src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
      crossorigin="anonymous"
      ></script>
    <script
      src="https://unpkg.com/babel-standalone@latest/babel.min.js"
      crossorigin="anonymous"
      ></script>
    <!-- Fonts to support Material Design -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      />
    <!-- Icons to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const {
        colors,
        CssBaseline,
        ThemeProvider,
        Typography,
        Container,
        createTheme,
        Box,
        SvgIcon,
        Link,
        styled,
        Tabs,
        Tab,
        StyledEngineProvider,
      } = MaterialUI;
      
      const AntTabs = styled(Tabs)({
      borderBottom: "1px solid #dee2e6",
      
      overflow: "visible!important",
      "& div.MuiTabs-scroller": {
      overflow: "visible!important"
      },
      "&.Mui-selected": {
      color: "#495057",
      backgroundColor: "red",
      borderColor: `#dee2e6 #dee2e6 #fff`
      },
      "& .MuiTabs-indicator": {
      display: "flex",
      justifyContent: "center",
      backgroundColor: "transparent"
      }
      });
      
      
      
      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",
      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",
      marginBottom: "-2px"
      },
      "&.Mui-focusVisible": {
      backgroundColor: "rgba(100, 95, 228, 0.32)"
      }
      }));
      
      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"
          sx={{ overflow: "overlay" }}
        >
          <StyledTab label="Workflows" />
          <StyledTab label="Datasets" />
          <StyledTab label="Connections" disabled />
        </AntTabs>
      </Box>
      </Box>
      );
      }
      
      function App() {
        return (
          <Container maxWidth="sm">
            <Box sx={{ my: 4 }}>
              <Typography variant="h4" component="h1" gutterBottom>
                CDN example
              </Typography>
              <ProTip />
              <Copyright />
            </Box>
          </Container>
        );
      }
      
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(
      <StyledEngineProvider injectFirst>
      <CustomizedTabs />
      </StyledEngineProvider>,
      );
    </script>
  </body>
</html>

请参阅此答案以供参考：https://stackoverflow.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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71588994

复制

相似问题

问样式的MUI Tabs，如Bootstrap Nav Tabs
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式的MUI Tabs，如Bootstrap Nav TabsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式的MUI Tabs，如Bootstrap Nav Tabs
EN