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
看来这与标签无关，因为它与条件渲染有关，对我而言，这是我在使用标签时发生的

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

Answer 1

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

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

所以不是

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

您应该拥有

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

Answer 2

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

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

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

C:\Users\<your account>\AppData\Roaming\npm\**vue**

确保添加了变体。

<FormControl variant="outlined">

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

输入控件/选择控件的属性 <InputLabel id="input_designationselected" style={{backgroundColor:'white'}}>Designation*</InputLabel> 与 labelId 的 ID 匹配

最终输出是我们需要的。

这让我疯狂了好几天 - 它认为我也会将它分享给其他人。如果发错地方了，抱歉。

材质UI TextField边框与Label重叠

2 个答案: