【问题标题】:Make <TabPanel> content full width and hight as parent使 <TabPanel> 内容的全宽和全高作为父级
【发布时间】:2021-04-10 22:45:40
【问题描述】:

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

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

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

【问题讨论】:

  • 单个选定选项卡的全宽或具有相同大小选项卡的全宽选项卡列表?
  • 仅选定选项卡的全宽。我用黄色标记了应该填充的内容。

标签: javascript html css reactjs material-ui


【解决方案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

【讨论】:

    【解决方案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

    【讨论】:

      【解决方案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

      【讨论】:

      • 它不起作用。在我实施您的建议时查看沙盒示例。
      猜你喜欢
      • 1970-01-01
      • 2017-12-31
      • 1970-01-01
      • 2014-08-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-03-12
      • 1970-01-01
      相关资源
      最近更新 更多