web-dev-qa-db-fra.com

Comment styler le matériau text-ui

J'essayais de savoir comment styler un material-ui.next textfield composant (React JS).

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

Mes classes sont créées comme suit (j'ai joint la partie pertinente):

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

Mon problème est que je n'arrive pas à obtenir la couleur du champ de texte qui devient blanc. Il semble que je puisse appliquer un style à l'ensemble du champ de texte (car le style de largeur fonctionne, etc.) ... mais je pense que le problème est que je n'applique pas les styles plus bas dans la chaîne et dans l'entrée réelle.

J'ai essayé de regarder les autres réponses concernant le passage d'entrées, mais je n'ai pas réussi.

J'ai tout essayé au mieux de mes capacités, mais je pense avoir besoin de demander si quelqu'un sait ce que je fais de travers.

En vous remerciant par avance pour votre temps .. Cordialement. Andre

À quoi il ressemble actuellement

What it currently looks like

javascriptreactjsmaterial-ui
7
Andre DiCioccio

Vous devez ajouter la propriété InputProps au champ 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,
    }}
/>

De plus, vous pouvez aussi styler l’étiquette ou utiliser une substitution comme décrit ici .

7
Craig Myles

Essayez d’utiliser le paramètre inputStyle sur TextField. De la docs ...

inputStyle (object) - Remplace les styles en-ligne de l'entrée de TextField élément. Lorsque multiLine est false: définissez le style de l'entrée élément. Lorsque multiLine est true: définissez le style du conteneur de la textarea.

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

Cela dépend vraiment de ce que vous essayez de changer. 

La documentation contient de nombreux exemples sur les TextField personnalisés, regardez-les ici:

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

Plus d'informations sur la personnalisation peuvent être trouvées ici:

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

et 

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

Avez-vous essayé d'utiliser! Important pour les changements de couleur? J'ai eu le même problème lorsque j'ai essayé de définir une couleur par défaut pour la bordure d'un TextField décrit.

Jetez un oeil à ceci: https://stackblitz.com/edit/material-ui-custom-outline-color

0
Peter Catalin

C'est une solution avec des styles inline:

<TextField
    style={{
        backgroundColor: "blue"
    }}
    InputProps={{
        style: {
            color: "red"
        }
    }}
/>
0
Jonathan R