我已經成功地在我的React應用程序的文本字段中增加了標簽。 我的問題是，當它收縮時，它只是重疊了它右邊的一些線。

點擊這里

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} />;
}

我鼓勵你在應用定制時總是使用DevTools。差距的大小由& lt圖例& gt元素:

元素的字體大小為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://code sandbox . io/s/material-ui-custom-textfield-composition-forked-g5co 7？file=/src/CustomTextField.js

你應該使用收縮作為文本字段的道具 刪除字體大小:& quot24px & quot讓它按材質調整大小-用戶界面 確保您的文本字段為: & ltTextField InputLabelProps = { { shrink:true } }.../& gt；

如果您想要自定義標簽的大小:

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
          }