Material UI TextField 边框与 Label 重叠

Question

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

我设法在此 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 在有条件渲染时与边框重叠
这似乎与选项卡无关，因为它与条件渲染有关，这对我来说是在我使用选项卡时发生的

Edit2：
我尝试给Textfield密钥，但问题仍然存在，并且边框和标签之间存在重叠Textfield，我更新了沙箱，以便它可以反映这一点

Answer 1

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

1. 标签文本与边框重叠 - 当接收到焦点时
2. 占位符文本接触左边框
3. 如果不是问题#1 - 那么即使选择/输入值，占位符文本也会保留在边框内

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

1. <FormControl variant="outlined">

确保添加了变体。

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

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

3. labelId输入控件/选择控件的属性与InputLabel

最终的输出就是我们所需要的。

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

Answer 2

标签宽度是在初始渲染期间计算的TextField，并且仅在标签更改时才重新计算。在第二个选项卡上的初始渲染期间TextField，TextField不可见，因此标签的宽度为 0。将 切换为TabPanel可见不会导致重新计算标签宽度，因此在轮廓中不会为其分配空间。

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

所以而不是

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

你应该改为

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