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 边框和标签之间存在重叠，我更新了沙箱以便它可以反映这一点

Answer 1

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

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

所以不是

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

你应该有

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

Answer 2

我在选择时遇到了重叠问题。虽然情况略有不同。我浏览了很多页面，但找不到解决这些问题的方法：

1. 标签文本与边框重叠 - 获得焦点时
2. 占位符文本触及左边框
3. 如果不是问题 #1 - 即使选择/输入了值，占位符文本也会留在边框内

所有这一切的简单解决方案是以下对我有用的检查 -

1. <FormControl variant="outlined">

确保添加了变体。

1. <InputLabel id="input_designationselected" style={{backgroundColor:'white'}}>Designation*</InputLabel>

确保为标签设置了背景。或参考此链接https://github.com/mui-org/material-ui/issues/14530

1. 输入控件/选择控件的属性labelId 与InputLabel 的ID 匹配

最终输出是我们需要的。

这让我疯狂了好几天——它以为我也会分享给其他人。抱歉，如果这是错误的发布位置。