Material UI TextField 邊框與標簽重疊

Question

我正在使用 Material UI TextField和 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 在條件渲染時與邊框重疊
似乎這與選項卡無關，因為它與條件渲染有關，這對我來說是在使用選項卡時發生的

編輯2：
我嘗試給Textfield一個鍵，但問題仍然存在並且Textfield邊框和標簽之間存在重疊，我更新了沙箱以便它可以反映這一點

Answer 1

標簽寬度在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">

確保添加了變體。

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

確保為標簽設置了背景。 或在此處參考此鏈接https://github.com/mui-org/material-ui/issues/14530

3. 輸入控件/選擇控件的屬性labelId與InputLabel的 ID 匹配

最終輸出是我們需要的。

它讓我瘋狂了好幾天 - 它認為我也會將它分享給其他人。 對不起，如果這是發布它的錯誤地方。