0
304
VistasEspacio adicional en la etiqueta cuando la reducción es verdadera con un tamaño de fuente de 12 px en el campo de texto mui
Estoy tratando de personalizar el componente textField pero tengo un problema con la etiqueta cuando se reduce:
import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui/material/styles"; import createStyled from "@mui/system/createStyled"; import type { TextFieldProps } from "@mui/material/TextField"; const defaultTheme = createTheme({}); const styled = createStyled({ defaultTheme }); const CustomTextField = styled(TextField)<TextFieldProps>( ({ theme, size }) => ({ "& .MuiOutlinedInput-root": { height: size === "small" ? theme.spacing(5) : theme.spacing(6) }, "& .MuiInputLabel-root": { transform: "translate(14px, 8px) scale(1)" }, "& .MuiInputLabel-shrink": { transform: "translate(12px, -9px) scale(0.75)", fontSize: "12px", fontWeight: 500, letterSpacing: 0.6, lineHeight: '20px', "&.MuiInputLabel-sizeSmall": { transform: "translate(12px, -9px) scale(0.75)" } } }) ); export default function BasicTextFields() { return ( <CustomTextField id="outlined-basic" label="long" variant="outlined" size="medium" InputLabelProps={{ shrink: true }} /> ); } Hay espacio adicional entre el borde y el texto: 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
aquí hay un caso de exhibición para Mui fieldSet y la leyenda en el componente TextFiled.
import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui/material/styles"; import createStyled from "@mui/system/createStyled"; import type { TextFieldProps } from "@mui/material/TextField"; const defaultTheme = createTheme({}); const styled = createStyled({ defaultTheme }); const CustomTextField = styled(TextField)<TextFieldProps>( ({ theme, size }) => ({ "& .MuiOutlinedInput-root": { height: size === "small" ? theme.spacing(5) : theme.spacing(6), '& fieldset legend span':{ opacity:1, backgroundColor:'blue', marginRight:10, } }, "& .MuiInputLabel-root": { transform: "translate(14px, 8px) scale(1)", backgroundColor:'red' }, "& .MuiInputLabel-shrink": { transform: "translate(12px, -9px) scale(0.75)", "&.MuiInputLabel-sizeSmall": { transform: "translate(12px, -9px) scale(0.75)" } } }) ); export default function BasicTextFields() { return ( <CustomTextField id="outlined-basic" label="long" variant="outlined" size="medium" InputLabelProps={{ shrink: true }} /> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta