聚焦时如何从 TextField 更改字体大小？

Question

我是 ReactJS 的初学者，我正在使用 materia-ui 创建一个页面。

我需要对 TextField 进行自定义，当输入字段填充一些文本时，我想更改font-size 。 当我更改字体大小时，label 和输入字段的边框底部之间有很大的空间。 所以我只需要在填写输入字段时更改font-size 。

你能告诉我我该怎么做吗？

这是我放入codesandbox的代码

 import React from "react"; import * as S from "./styles"; export default function App() { return ( <div className="App"> <S.Input label="Name" variant="standard" /> </div> ); }

 import styled from "styled-components"; import { TextField } from "@mui/material"; export const Input = styled(TextField)` && {.MuiInputBase-root { font-size: 30px; } } `;

非常感谢您的帮助。

Answer 1

这里有几种方法，请记住我从未真正使用过mui组件。

两者都涉及幻数，这不是完全诚实的最佳实践。

第一种解决方案是在初始时调整 label 的y position，并在文本区域聚焦时进行调整。 沙盒链接

export const Input = styled(TextField)`
  && {
    .MuiInputBase-root {
      font-size: 30px;
    }
    .MuiInputLabel-root {
      transform: translateY(40px);
    }
    .Mui-focused {
      transform: translateY(0px);
    }
  }
`;

第二种方法类似，但使用line-height代替。 同样，使用重点和初始 label 类。

export const Input = styled(TextField)`
  && {
    .MuiInputBase-root {
      font-size: 30px;
    }
    .MuiInputLabel-root {
      line-height: 60px;
    }
    .Mui-focused {
      line-height: 22px;
    }
  }
`;

Answer 2

仅使用 css 的方法是使用:placeholder-shown伪选择器。

仅当输入为空/未填充时，才会显示占位符文本。

 label{ user-select:none; display:block; } input{ border:none; border-bottom:1px solid #000; transition:0.3s; } input:invalid, input:placeholder-shown{ transform:translateY(-75%); background:transparent; } input::placeholder { color: transparent; } input:focus{ transform:translateY(0%); font-size:2em; outline:none; border-bottom:1px solid red; }

 <p> <label>Name</label> <input class="MuiInput-input" value="" placeholder="placeholder"> </p> <p> <label>Last name*</label> <input type="text" class="MuiInput-input" value="" required> </p>

对这个伪选择器的支持非常可靠：参见 caniuse 记录。

作为替代方案，您可以以类似的方式对必填字段使用input:invalid选择器。