React中MUI TextField输入内容后修改font-size并解决间距问题

要实现仅在输入框有内容时调整字体大小，你可以通过两种方式实现，具体如下：

方式一：利用Material-UI内置状态类（无需额外维护状态） #

Material-UI的TextField会在输入框有内容或获得焦点时，给标签元素自动添加MuiInputLabel-shrink收缩类，我们可以借助这个类结合CSS兄弟选择器来定位输入框，仅在标签收缩时应用自定义字体大小：

修改你的样式文件：

import styled from "styled-components";
import { TextField } from "@mui/material";

export const Input = styled(TextField)`
  && {
    /* 默认状态保留原字体大小 */
    .MuiInputBase-root {
      font-size: inherit;
    }
    /* 标签收缩（输入框有内容/聚焦）时，调整输入框字体大小 */
    .MuiInputLabel-shrink ~ .MuiInputBase-root {
      font-size: 30px;
    }
  }
`;

这种方式无需修改JS逻辑，直接通过组件内置的状态类实现样式切换，能避免默认状态下标签与输入框间距过大的问题。

方式二：通过React状态精准控制（仅输入框有内容时生效） #

如果需要排除"聚焦但无内容"的场景，只在输入框实际填入内容时调整字体，可以手动维护输入值状态：

修改JS代码 #

import React, { useState } from "react";
import * as S from "./styles";

export default function App() {
  const [inputValue, setInputValue] = useState("");

  return (
    <div className="App">
      <S.Input 
        label="Name" 
        variant="standard"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        className={inputValue ? "has-content" : ""}
      />
    </div>
  );
}

修改样式文件 #

import styled from "styled-components";
import { TextField } from "@mui/material";

export const Input = styled(TextField)`
  && {
    .MuiInputBase-root {
      font-size: inherit;
    }
    /* 仅当输入框有内容时应用自定义字体 */
    &.has-content .MuiInputBase-root {
      font-size: 30px;
    }
  }
`;

内容的提问来源于stack exchange，提问作者Katyellen