使 <TabPanel> 内容的全宽和全高作为父级

Question

我将 React 与 material-ui 一起使用。我正在使用带有标签的 appbar，当我选择一些标签时，我希望能够将标签的内容设为全宽和全高。

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

正如您所提供的图片所示，选项卡的内容并未填满栏下方的整个页面。我该怎么做才能填补它？

Answer 1

如果您在屏幕截图中检查标记的 div。您会发现填充样式与MuiTabPanel-root 有关。在Material's official website 上，他们介绍了几种覆盖组件样式的方法。这是您可以执行的一种方法，通过规则名称覆盖组件的样式。您还可以在其网站的组件 API 部分下找到每个组件的规则名称。

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

用法：

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

查看编辑代码here。

Answer 2

由于父容器不是全高，所以面板不是全高。使全高的选项卡面板将一个类传递给选项卡面板的根。将所需的高度传递给tabpanelRoot 类。 （这里我忽略了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)`
  },
}));

这里是codeandbox链接：-https://codesandbox.io/s/angry-noether-huxvz

Answer 3

试试这个

使用 useStyle 挂钩更新代码。

App.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