web-dev-qa-db-fra.com

Comment substituer des styles pour un composant TextField matériel-ui sans utiliser MUIThemeProvider?

Comment masquer/supprimer le soulignement dans un composant TextField without en utilisant le code suivant:

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:hover:not($disabled):before': {
          backgroundColor: 'rgba(0, 188, 212, 0.7)',
        },
      },
    },
  },
});

Je voudrais le faire avec des accessoires et selon les docs: https://material-ui.com/api/input/

Je devrais pouvoir changer le support de soulignement, mais cela ne fonctionne pas.

reactjsmaterial-uijss
3
Kevin Vugts

Voici comment vous le faites:

<TextField
    id="name"
    label="Name"
    value={this.state.name}
    margin="normal"
    InputProps={{disableUnderline: true}}
/>

Comment l'ai-je compris?

Vous avez lié à la Input documentation , qui a bien un disableUnderline prop.

Cependant, vous utilisez un composant TextField :

Il est important de comprendre que le champ de texte est une simple abstraction Au-dessus des composants suivants:

  • FormControl
  • InputLabel
  • Contribution
  • FormHelperText

Si vous consultez la liste des accessoires disponibles pour TextField:

InputProps - object - Propriétés appliquées à l'élément Input.

7
thirtydot

Avec la version la plus récente de Material-UI, c’était le seul moyen de réussir:

<TextField InputProps={{classes: {underline: classes.underline}}} />

const styles = theme => ({
  underline: {
    '&:before': {
      borderBottomColor: colors.white,
    },
    '&:after': {
      borderBottomColor: colors.white,
    },
    '&:hover:before': {
      borderBottomColor: [colors.white, '!important'],
    },
  },
})
1
juank11memphis

J'ai trouvé un moyen de résoudre ce problème ..

<TextField InputProps={{classes: {underline: classes.underline}}} />

const styles = theme => ({
  underline: {
    '&:hover': {
      '&:before': {
        borderBottom: ['rgba(0, 188, 212, 0.7)', '!important'],
      }
    },
    '&:before': {
      borderBottom: 'rgba(0, 188, 212, 0.7)',
    }
  }
})
1
Jonghee Park