0
274
VistasCómo diseñar el campo de texto material-ui
He estado tratando de averiguar cómo diseñar un componente TextField material-ui .
<TextField id="email" label="Email" className={classes.textField} value={this.state.form_email} onChange={this.handle_change('form_email')} margin="normal" />Mis clases se crean de la siguiente manera:
const styles = theme => ({ textField: { width: '90%', marginLeft: 'auto', marginRight: 'auto', color: 'white', paddingBottom: 0, marginTop: 0, fontWeight: 500 }, });Mi problema es que parece que no puedo cambiar el color del campo de texto a blanco. Parece que puedo aplicar estilo al campo de texto general (porque el estilo de ancho funciona, etc.) ... pero creo que el problema es que no estoy aplicando los estilos más abajo en la cadena y en la entrada real.
He intentado ver las otras respuestas relacionadas con pasar inputProps pero no he tenido éxito.
He intentado todo lo mejor que he podido, pero creo que necesito preguntar si alguien sabe qué estoy haciendo mal.
Cómo se ve actualmente
3 Respuestas
Responde la pregunta0
Debe agregar la propiedad InputProps al TextField.
const styles = theme => ({ textField: { width: '90%', marginLeft: 'auto', marginRight: 'auto', paddingBottom: 0, marginTop: 0, fontWeight: 500 }, input: { color: 'white' } });JSX:
<TextField id="email" label="Email" className={classes.textField} value={this.state.form_email} onChange={this.handle_change('form_email')} margin="normal" InputProps={{ className: classes.input, }} />Además, también puede diseñar la etiqueta o usar una anulación como se describe aquí .
0
Todas las respuestas aquí muestran cómo diseñar cosas con InputProps o inputProps, pero nadie explicó por qué y cómo funciona. Y nadie explicó cuál es la diferencia entre inputProps y InputProps
<TextField variant="outlined" // inputProps are used to pass attributes native to the underlying // HTML input element, eg name, id, style. inputProps={{ style: { textAlign: 'center' }, } // InputProps (capital I) passes props to the wrapper Material // component. Can be one of the following: Input, FilledInput, // OutlinedInput. You can pass here anything that the underlying // Material component uses: error, value, onChange, and classes. InputProps={{ // Usually you don't need className, the `classes` object will // be sufficient. However, you can also use it and this will // add your class to the div of the InputBase. className: styles.slider_filter_input, classes: { root: classes.root focused: classes.focused // The list of keys you pass here depend on your variant // If for example you used variant="outlined", then you need // to check the CSS API of the OutlinedInput. } }} />Aquí hay una caja de códigos de trabajo que muestra las ideas anteriores.
0
Esta es una solución con estilos en línea:
<TextField style={{ backgroundColor: "blue" }} InputProps={{ style: { color: "red" } }} />