React中Material-Ui中增加标签的问题

Question

我已经成功地在我的 React 应用的 TextField 中增加了 Label。 我的问题是，当它收缩时，它只是与右侧的某条线重叠。

Click Here

import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputLabel-shrink": {
      fontSize: "24px"
    }
  }
}));

export default function CustomTextField({ InputLabelProps = {}, ...props }) {
  const classes = useStyles();
  return <TextField {...props} className={classes.root} />;
}

Answer 1

我鼓励您在应用自定义时始终使用 DevTools。它由<legend>元素确定的间隙大小：

元素的字体大小有一个 font-size: 0.75em 以说明 CSS 转换。

因此您可以简单地将相同的字体大小应用到其父级：

import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputLabel-shrink, & fieldset": {
      fontSize: "24px"
    }
  }
}));

export default function CustomTextField({ InputLabelProps = {}, ...props }) {
  const classes = useStyles();
  return <TextField {...props} className={classes.root} />;
}

https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-g5co7?file=/src/CustomTextField.js

Answer 2

您应该使用 Shrink 作为 TextField 的道具
删除 fontSize: "24px" 让它通过 Material-UI 调整大小 确保您的 TextField 为：
<TextField InputLabelProps={{shrink: true}} .../>

如果要自定义标签大小：

    fontSize: 30,
    color: "red",
    "&$labelFocused": {
      color: "purple"
    }
  },
  labelFocused: {}
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="Your Label"
        InputLabelProps={{
          classes: {
            root: classes.labelRoot,
            focused: classes.labelFocused
          }