制作<tabpanel>內容全寬和高作為父級</tabpanel>

Question

我將 React 與 material-ui 一起使用。我將 appbar 與選項卡一起使用，並且我希望能夠在選擇某些選項卡時將選項卡的內容設為全寬和全高。

這是沙箱示例： https://codesandbox.io/s/vigorous-cookies-4dmf2?file=/src/App.js

如您所見，提供的圖片中選項卡的內容並未填滿欄下的整個頁面。 我該怎么做才能填補它？

Answer 1

如果您在屏幕截圖中檢查標記的 div。 您會發現填充樣式與MuiTabPanel-root相關。 在Material 的官方網站上，他們介紹了幾種覆蓋組件 styles 的方法。 這是您可以執行的一種方法，即通過規則名稱覆蓋組件的樣式。 您還可以在其網站上的組件 API部分下找到每個組件的規則名稱。

const useStyles = makeStyles({
  tabPanelRoot: {
    padding: 0
  },
});

用法：

export default function App() {
    const classes = useStyles();
    return(
        ...
        <TabPanel value="1" classes={{ root: classes.tabPanelRoot}}>
        ...
    )
}

請參閱此處編輯的代碼。

Answer 2

嘗試這個

使用 useStyle 掛鈎更新了代碼。

應用程序.js

import React from "react";
import "./styles.css";
import AppBar from "@material-ui/core/AppBar";
import Tab from "@material-ui/core/Tab";
import TabContext from "@material-ui/lab/TabContext";
import TabList from "@material-ui/lab/TabList";
import TabPanel from "@material-ui/lab/TabPanel";
import Box from "@material-ui/core/Box";
import MonetizationOnIcon from "@material-ui/icons/MonetizationOn";
import ContactMailIcon from "@material-ui/icons/ContactMail";
import AccessibilityIcon from "@material-ui/icons/Accessibility";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  appContainer: {
    display: "flex",
    flexDirection: "column",
    width: "100vw",
    height: "100vh"
  },

  container: {
    display: "flex",
    height: "100%",
    width: "100%"
  },
  panel: {
    width: "100%"
  }
});
export default function App() {
  const [value, setValue] = React.useState("1");
  const classes = useStyles();
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box className={classes.appContainer}>
      <TabContext value={value}>
        <AppBar position="static">
          <TabList
            variant="scrollable"
            onChange={handleChange}
            aria-label="simple tabs example"
          >
            <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
            <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />

            <Tab label="Participants" value="3" icon={<AccessibilityIcon />} />
          </TabList>
        </AppBar>

        <Box className={classes.container}>
          <TabPanel value="1" className={classes.panel}>
            <Box
              className={classes.container}
              style={{ backgroundColor: "red" }}
            >
              Content 1
            </Box>
          </TabPanel>
          <TabPanel value="2" className={classes.panel}>
            <Box style={{ backgroundColor: "green" }} className={classes.container} >Content 2</Box>
          </TabPanel>
          <TabPanel value="3" className={classes.panel}>
            <Box className={classes.container} style={{ backgroundColor: "blue" }}>Content 3</Box>
          </TabPanel>
        </Box>
      </TabContext>
    </Box>
  );
}

這是沙盒鏈接 - https://codesandbox.io/s/shy-voice-nih2s

Answer 3

由於父容器不是全高，所以 tanpanel 不是全高。 使全高的 tabpanel 將 class 傳遞到 tabpanel 的根目錄。 將所需的高度傳遞給tabpanelRoot class。 （這里我忽略了appbar的高度）

export default function App() {
  const classes= useStyles()
  const [value, setValue] = React.useState("1");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box style={{height:'100%', background:'red'}}>
      <TabContext value={value}>
        <AppBar position="static">
          <TabList
            variant="scrollable"
            onChange={handleChange}
            aria-label="simple tabs example"
          >
            <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
            <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />

            <Tab label="Participants" value="3" icon={<AccessibilityIcon />} />
          </TabList>
        </AppBar>

        <Box  style={{height:'100%', background:'red'}}>
          <TabPanel value="1" classes={{root:classes.tabpanelRoot}}>
            <Box style={{height:'100%', backgroundColor: "red" }}>Content 1</Box>
          </TabPanel>
          <TabPanel value="2" classes={{root:classes.tabpanelRoot}}>
            <Box style={{height:'100%', backgroundColor: "green" }}>Content 2</Box>
          </TabPanel>
          <TabPanel value="3" classes={{root:classes.tabpanelRoot}}>
            <Box style={{height:'100%', backgroundColor: "blue" }}>Content 3</Box>
          </TabPanel>
        </Box>
      </TabContext>
    </Box>
  );
}


const useStyles = makeStyles((theme) => ({
  tabpanelRoot: {
    padding:0,
    height: `calc(100vh - 52px)`
  },
}));

這是代碼框鏈接：- https://codesandbox.io/s/angry-noether-huxvz

Answer 4

import * as React from 'react';
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';

export default function LabTabs() {
  const [value, setValue] = React.useState('1');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%', typography: 'body1' }}>
      <TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            <Tab label="Item One" value="1" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </Box>
        <TabPanel sx={{pl: 1,pt:1}} value="1">Item One</TabPanel>
        <TabPanel sx={{pl: 1,pt:1}} value="2">Item Two</TabPanel>
        <TabPanel sx={{pl: 1,pt:1}} value="3">Item Three</TabPanel>
      </TabContext>
    </Box>
  );
}

Answer 5

選項卡高度可以通過.MuiTabs-root 更改

const AntTab = styled((props: StyledTabProps) => (
  <Tab disableRipple {...props} />
  ))(() => ({

   **minHeight: '33px',
   maxHeight: '33px',**
   color: '#718296',
   fontFamily: 'Montserrat',

  }))