聚焦時如何從 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選擇器。