Remove underline from Input component Material UI (v1.0 Beta)

Question

Using the Input component from React Material UI library (v1.0 beta), I am trying to remove the underline that is rendered using a pseudo element.

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

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

When I try to target &:before though, I get the below error. What is the correct way to override styles and remove this underline?

Warning: Material-UI: the key .searchInput-underline-1572343541:before provided to the classes property object is not implemented in Input.

You can only overrides one of the following: root,formControl,inkbar,error,input,disabled,focused,underline,multiline,inputDisabled,inputSingleline,inputMultiline,fullWidth,label + .MuiInput-formControl-583691922,.MuiInput-inkbar-171024778:after,.MuiInput-inkbar-171024778.MuiInput-focused-2315792072:after,.MuiInput-error-3674946725:after,.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-583691922 > .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):before,.MuiInput-underline-892978022.MuiInput-disabled-265053423:before

Mayank Shukla Mayank Shukla · Accepted Answer · 2017-08-11T15:24:13

As per DOC.

disableUnderline prop =>

disableUnderline : boolean

Default Value: false

Details: If true, the input will not have an underline.

There is a property disableUnderline provided by the DOC, we can directly use that to remove the underline from input element.

Try this:

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

Remove underline from Input component Material UI (v1.0 Beta)

2 Answers