0
148
Views¿Cómo cambiar el tamaño de fuente de TextField cuando está enfocado?
Soy principiante en ReactJS y estoy usando materia-ui para crear una página.
Necesito personalizar un TextField, me gustaría cambiar el font-size cuando el campo de entrada se llene con texto. Cuando cambio el tamaño de fuente, hay un espacio muy grande entre la etiqueta y el borde inferior del campo de entrada. Entonces necesito cambiar el font-size solo cuando el campo de entrada está lleno.
¿Podría decirme cómo puedo hacer eso?
Aquí está mi código que puse en 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; } } `;Muchas gracias por cualquier ayuda.
1 answers
Answer question0
Aquí hay un par de formas, tenga en cuenta que nunca he usado componentes mui .
Ambos involucran números mágicos que no son la mejor práctica siendo completamente honestos.
La primera solución consiste en ajustar la posición y de la etiqueta inicialmente y cuando se enfoca el área de texto. enlace de caja de arena
export const Input = styled(TextField)` && { .MuiInputBase-root { font-size: 30px; } .MuiInputLabel-root { transform: translateY(40px); } .Mui-focused { transform: translateY(0px); } } `; El segundo enfoque es similar, pero usa line-height su lugar. Nuevamente, usando clases de etiquetas enfocadas e iniciales.
export const Input = styled(TextField)` && { .MuiInputBase-root { font-size: 30px; } .MuiInputLabel-root { line-height: 60px; } .Mui-focused { line-height: 22px; } } `;