从输入组件材质UI(v1.0 Beta)中删除下划线

Question

使用InputReact Material UI库(v1.0 beta)中的组件,我试图删除使用伪元素渲染的下划线.

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

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

当我尝试定位时&:before,我得到以下错误.覆盖样式并删除此下划线的正确方法是什么？

警告:Material-UI:.searchInput-underline-1572343541:before提供给classes属性对象的键 未在Input中实现.

您只能覆盖下列之一:根,formControl,inkbar,错误输入,残疾人,突出重点,强调,多行inputDisabled,inputSingleline,inputMultiline,FULLWIDTH,标签+ .MuiInput-formControl-583691922,.MuiInput-inkbar-171024778 :之后,.MuiInput-inkbar-171024778.MuiInput为重点-2315792072:之后,.MuiInput错误 - 3674946725:之后,.MuiInput输入-3582851417 :: - WebKit的输入占位符,.MuiInput输入-3582851417 :: -moz-占位符,.MuiInput输入-3582851417:-MS-输入占位符,.MuiInput输入-3582851417 :: - MS-输入占位符,.MuiInput输入-3582851417:专注,.MuiInput输入-3582851417: :-webkit-搜索装饰,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417 :: - webkit的输入占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417 :: - MOZ-占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417:-MS-输入占位符,标签+ .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输入-3582851417:聚焦:: - MOZ-占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417:焦点:-MS-输入占位符,标签+ .MuiInput-formControl-583691922 > .MuiInput输入-3582851417:聚焦:: - MS-输入占位符,.MuiInput下划线-892978022:前,.MuiInput下划线-892978022:悬停:否(.MuiInput禁用-265053423):之前,.MuiInput -underline-892978022.MuiInput禁用-265053423:前

Answer 1

根据DOC.

disableUnderline prop =>

disableUnderline:布尔值

默认值:false

详细信息:如果为true,则输入将不具有下划线.

disableUnderlineDOC提供了一个属性,我们可以直接使用它从输入元素中删除下划线.

试试这个:

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