web-dev-qa-db-fra.com

Mise en forme de l'espace réservé dans un TextField

L'API TextField ne mentionne rien sur la manière dont on pourrait styler l'élément pseudo-espace réservé de l'élément input.

En gros, je voudrais changer le style par défaut du texte de substitution, et le sac à malice habituel ne fonctionne pas car je ne peux pas accéder à l'élément.

Y a-t-il un moyen d'y arriver? Et si tel est le cas, quelle est la méthode d'écriture ::-webkit-input-placeholder équivalente à JSS/React/DOM?

htmlcss3material-uijss
7
oligofren

Cas 1

Placez le texte de substitution souhaité dans la propriété label du composant TextField et utilisez la propriété labelClassName de TextField pour le personnaliser. Vous pouvez également passer InputLabelProps avec un attribut className, classes ou style.

Cas 2

Évitez d'utiliser la propriété label de TextField et placez le texte de substitution dans sa propriété placeholder. Fiez-vous à InputProps pour remplacer la classe de l’élément HTML input généré.

Code

Le code ci-dessous couvre les deux cas susmentionnés. Extrait de CodeSandbox .

import React from 'react';
import TextField from 'material-ui/TextField';
import { withStyles } from 'material-ui/styles';
import withRoot from '../components/withRoot';

const styles = {
  'input-label': {
    textOverflow: 'Ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: '100%',
    color: 'red'
  },

  'input': {
    '&::placeholder': {
      textOverflow: 'Ellipsis !important',
      color: 'blue'
    }
  }
};

class Index extends React.Component {
  render() {
    return <div style={ {width: 150, margin: '0 auto'} }>
      {/* Uses "label" and "labelClassName". */}
      <TextField
        fullWidth
        label='I am a really really long red TextField label'
        labelClassName={ this.props.classes['input-label'] } />

      {/* Uses "label" and InputLabelProps" with inline styles. */}
      <TextField
        fullWidth
        label='I am a really really long green TextField label'
        InputLabelProps={{
          style: {
            textOverflow: 'Ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            width: '100%',
            color: 'green'
          } }} />

      {/* Uses "placeholder" and "InputProps" with "classes". */}
      <TextField
        fullWidth
        margin='normal'
        placeholder='I am a really really long glue TextField label'
        InputProps={{ classes: {input: this.props.classes['input']} }} />
    </div>;
  }
}

export default withStyles(styles)(Index);
8
Rafa

Je n'ai pas trouvé de réponse adéquate à la question de savoir comment accéder à l'élément de saisie interne, mais j'ai également trouvé la réponse dans l'élément source de l'élément Input, dont TextField est composé.

Fondamentalement, il utilise les noms droits CSS, entre guillemets: '&::-webkit-input-placeholder': { color: 'blue' }

2
oligofren

vous pouvez ajouter un style à votre entrée en utilisant le sélecteur ::placeholder dans css ça fonctionnera

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
1
satyajit rout