css - Material UI TextField 边框与 Label 重叠

Question

我正在使用 Material UI TextField 和 Material UI Tab。我有两个选项卡，每个选项卡中都有一个文本字段。单击 TextField 后，标签的边框应该打开，但如果当前 Tab 不是 Tab1，则不会发生这种情况!!

我设法在 this CodeSandBox 中重现了这个问题代码也包含在下面。

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import TextField from "@material-ui/core/TextField";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`scrollable-force-tabpanel-${index}`}
      aria-labelledby={`scrollable-force-tab-${index}`}
      {...other}
    >
      <Box p={1}>{children}</Box>
    </Typography>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired
};

function a11yProps(index) {
  return {
    id: `scrollable-force-tab-${index}`,
    "aria-controls": `scrollable-force-tabpanel-${index}`
  };
}

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper,
    padding: 0,
    margin: 0
  },
  Tab: {
    MuiTab: {
      root: {
        minWidth: "130px"
      }
    }
  }
}));

export default function Demo(props) {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {
    setValue(newValue);
    console.log(newValue);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          key={"tabs"}
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="on"
          indicatorColor="primary"
          textColor="primary"
          aria-label="scrollable force tabs example"
        >
          <Tab
            key={"tab1"}
            className={classes.Tab}
            label={0}
            {...a11yProps(0)}
          />
          <Tab
            key={"tab2"}
            className={classes.Tab}
            label={1}
            {...a11yProps(1)}
          />
        </Tabs>
      </AppBar>
      <TabPanel
        key={"panel1"}
        value={value}
        index={0}
        style={{ padding: 0, margin: 0 }}
      >
        <div key={"div1"}>
          hi im tab1{" "}
          <TextField
            key={"textfield1"}
            variant={"outlined"}
            margin={"dense"}
            label={"im tab 0 textfield"}
          />
        </div>
      </TabPanel>
      <TabPanel
        key={"panel2"}
        value={value}
        index={1}
        style={{ padding: 0, margin: 0 }}
      >
        <div key={"div2"}>
          hi im tab2
          <TextField
            key={"textfield2"}
            variant={"outlined"}
            margin={"dense"}
            label={"im tab 1 textfield"}
          />
        </div>
      </TabPanel>
    </div>
  );
}

编辑1:

我设法找到了一个类似的问题......，
Material-UI TextField Outline Label is overlapping with border when conditionally rendered
这似乎与选项卡无关，因为它与条件渲染有关，这对我来说是在我使用选项卡时发生的

编辑2:
我尝试给 Textfield 一个键，但问题仍然存在并且 Textfield 边框和标签之间存在重叠，我更新了沙箱以便它可以反射(reflect)这一点

Answer 1

label width is calculated在 TextField 的初始呈现期间，仅当标签更改时才重新计算。在第二个选项卡上 TextField 的初始呈现期间，TextField 不可见，因此标签的宽度为 0。将 TabPanel 切换为visible 不会导致重新计算标签宽度，因此在轮廓中没有为其分配空间。

您可以在 TabPanel 中使用与演示中相同的方法来解决此问题，该方法仅在面板可见时呈现面板的子项。这允许在初始渲染后正确计算标签宽度。

所以代替

<Box p={1}>{children}</Box>

你应该有

{value === index && <Box p={1}>{children}</Box>}