0
901
VistasNo se puede cambiar el tamaño de fuente del campo de texto en material ui
Estoy tratando de aprender material ui. Quiero agrandar el campo de texto en mi página. Sin embargo, los estilos que incrusto en el campo cambian la altura, el ancho y otras propiedades excepto el tamaño. El siguiente es mi código:
const styles = { container: { display: 'flex', flexWrap: 'wrap', }, textField: { // marginLeft: theme.spacing.unit, // marginRight: theme.spacing.unit, width: 300, margin: 100, fontSize: 50 //??? Doesnt work } }El siguiente es el componente sin estado (Reaccionar):
const Searchbox = (props) => { const { classes } = props; return ( <TextField onKeyDown={props.onKeyDown} id="with-placeholder" label="Add id" placeholder="id" className={classes.textField} margin="normal" autoFocus={true} helperText={"Add an existing id or select "} /> ); }; export default withStyles(styles)(Searchbox);Entiendo totalmente que no hay ciencia espacial, ya que es un enfoque sencillo de CSS en JS para aplicar estilos.
Sin embargo, no puedo anular el tamaño de fuente base para mi campo de texto. Cualquier ayuda será apreciada
3 Respuestas
Responde la pregunta0
Como se menciona en la página TextField API , aplique estilos a InputProps que aplica estilo al elemento de entrada
Aquí está el código
const styles = { container: { display: 'flex', flexWrap: 'wrap', }, textField: { width: 300, margin: 100, }, //style for font size resize:{ fontSize:50 }, } <TextField id="with-placeholder" label="Add id" placeholder="id" InputProps={{ classes: { input: classes.resize, }, }} className={classes.textField} margin="normal" autoFocus={true} helperText={"Add an existing id or select "}/>0
La forma más sencilla de cambiar el tamaño de fuente tanto de la etiqueta de entrada como del texto de entrada es usar un estilo en línea:
<TextField label="input label name here" margin="normal" inputProps={{style: {fontSize: 40}}} // font size of input text InputLabelProps={{style: {fontSize: 40}}} // font size of input label /> 
0
Estoy en la versión 3.8.1 y es posible que tenga una solución un poco más sencilla.
en campo de TextField
inputProps={{ style: {fontSize: 15} }} Sin embargo, esto también puede implicar ajustar lineHeight para que se vea mejor.