He estado tratando de averiguar cómo el estilo de un material-interfaz de usuario.el próximo textfield componente.

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

Mis clases se crea 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 me parece que no puede obtener el color del campo de texto para cambiar a blanco. Me parecen ser capaces de aplicar un estilo para el texto general de campo (debido a la anchura de estilo de las obras, etc)… pero creo que el problema es que yo no soy la aplicación de los estilos más abajo en la cadena y en la entrada actual.

He tratado de buscar en las otras respuestas tratar con el pasar de los inputProps pero no he tenido ningún éxito.

Han intentado todo lo mejor de mi capacidad, pero creo que es necesario preguntar si alguien sabe qué estoy haciendo mal.

Lo que actualmente se ve como

Cómo el estilo de material de interfaz de usuario textfield

  • Inútil de la imagen, creo que se debe utilizar la consola de depuración para ver cómo css, css que se aplican a su textfield del color

6 Comentarios

  1. 16

    Usted necesita agregar el InputProps propiedad 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,
        }}
    />

    Por otro lado, puede también el estilo de la etiqueta o el uso de un reemplazo como se describe aquí.

  2. 6

    Esta es una solución con estilos en línea:

    <TextField
        style={{
            backgroundColor: "blue"
        }}
        InputProps={{
            style: {
                color: "red"
            }
        }}
    />
    • de alguna manera esta solución funcionó para mí, gracias
  3. 2

    Trate de usar el inputStyle la proposición en TextField. Desde el docs

    inputStyle (objeto) – Reemplazar la línea de estilos de el campo de texto de entrada
    elemento. Cuando multiLine es falso: definir el estilo de la entrada
    elemento. Cuando multiLine es cierto: definir el estilo del contenedor de
    el textarea.

    <TextField inputStyle={{ backgroundColor: 'red' }} />
  4. 1

    Realmente depende de lo que exactamente están tratando de cambiar.

    La documentación tiene un montón de ejemplos en la costumbre campos de texto, échales un vistazo aquí:

    https://material-ui.com/demos/text-fields/#customized-inputs

    Más información acerca de la personalización se puede encontrar aquí:

    https://material-ui.com/customization/overrides/

    y

    https://material-ui.com/customization/themes/

    ¿Has probado de usar !importante para los cambios de color? Tuve el mismo problema cuando traté de establecer un valor predeterminado de color para el borde de un descritos TextField

    Echar un vistazo a esto: https://stackblitz.com/edit/material-ui-custom-outline-color

  5. 1

    Te sugiero mantener su estilo dentro de un tema.

    const theme = createMuiTheme({
      overrides: {
        MuiInputBase: {
          input: {
            background: "#fff",
          },
        },
      },
    });
  6. 0

    Todas las respuestas aquí se muestra cómo el estilo de las cosas con InputProps o inputProps, pero nadie explicó por qué, y cómo funciona. Y nadie se explica cuál es la diferencia entre inputProps y InputProps

    <TextField    
        variant="outlined"
        //inputProps are used to pass things that are native to the underlying html input element, things like name, id, style.
        inputProps={{
          style: { textAlign: 'center' },
        }
        //this 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 like error, value, onChange, and classes
        InputProps={{
           className: styles.slider_filter_input, 
           //usually you dont need className, the classes object will be sufficient
           // but wanted to show that you can also use it (this will put your class on div of the InputBase)
           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 and so an
           }
        }}
    />

    Finalmente aquí es un trabajo codesandbox mostrando las ideas por encima de https://codesandbox.io/s/material-ui-drawer-8p6wv

Dejar respuesta

Please enter your comment!
Please enter your name here