web-dev-qa-db-fra.com

Supprimer le soulignement de l'interface utilisateur du matériau du composant d'entrée (v1.0 Beta)

En utilisant le composant Input de React Material UI library ( v1.0 beta ), j'essaie de supprimer le soulignement rendu à l'aide d'un pseudo élément.

const styleSheet = createStyleSheet('searchInput', () => ({
    underline: {
        '&:before': {
            height:0
        }
    }
}));

const SearchInput = ({ classes, placeholder, value, onChange }) => {
    return (
        <Input
            classes={classes}
            placeholder={placeholder}
            value={value}
            onChange={onChange} />
    );
};

Lorsque j'essaie de cibler &:before cependant, j'obtiens l'erreur ci-dessous. Quelle est la bonne façon de remplacer les styles et de supprimer ce soulignement?

Avertissement: Material-UI: la clé .searchInput-underline-1572343541:before fourni à l'objet de propriété classes n'est pas implémenté dans Input.

Vous pouvez uniquement remplacer l'un des éléments suivants: root, formControl, inkbar, error, input, désactivé, focus, souligné, multiligne, inputDisabled, inputSingleline, inputMultiline, fullWidth, label + .MuiInput-formControl-583691922, .MuiInput-inkbar-171024778 : après, .MuiInput-inkbar-171024778.MuiInput-focus-2315792072: après, .MuiInput-error-3674946725: après, .MuiInput-input-3582851417 :: - webkit-input-placeholder, .MuiInput-input-3582851417 :: -moz-placeholder, .MuiInput-input-3582851417: -ms-input-placeholder, .MuiInput-input-3582851417 :: - ms-input-placeholder, .MuiInput-input-3582851417: focus, .MuiInput-input-3582851417: : -webkit-search-decoration, label + .MuiInput-formControl-583691922> .MuiInput-input-3582851417, label + .MuiInput-formControl-583691922> .MuiInput-input-3582851417 :: - webkit-input-placeholder, label + .MuiInput-formControl-583691922> .MuiInput-input-3582851417 :: - moz-placeholder, label + .MuiInput-formControl-583691922> .MuiInput-input-3582851417: -ms-input-placeholder, label + .MuiInput-formControl- 58 3691922> .MuiInput-input-3582851417 :: - ms-input-placeholder, label + .MuiInput-formControl-583691922> .MuiInput-input-3582851417: focus :: - webkit-input-placeholder, label + .MuiInput-formControl- 583691922> .MuiInput-input-3582851417: focus :: - moz-placeholder, label + .MuiInput-formControl-583691922> .MuiInput-input-3582851417: focus: -ms-input-placeholder, label + .MuiInput-formControl-583691922 > .MuiInput-input-3582851417: focus :: - ms-input-placeholder, .MuiInput-underline-892978022: before, .MuiInput-underline-892978022: hover: not (.MuiInput-disabled-265053423): avant, .MuiInput -underline-892978022.MuiInput-disabled-265053423: avant

reactjsmaterial-ui
12
mikeycgto

Selon DOC .

disableUnderline prop =>

disableUnderline: boolean

Valeur par défaut: false

Détails: Si vrai, l'entrée n'aura pas de soulignement.

Il existe une propriété disableUnderline fournie par le DOC, nous pouvons directement l'utiliser pour supprimer le soulignement de l'élément d'entrée.

Essaye ça:

<Input
     disableUnderline={true}     //here
     classes={classes}
     placeholder={placeholder}
     value={value}
     onChange={onChange} />
23
Mayank Shukla