reactjs - 从输入组件 Material UI 中删除下划线(v1.0 Beta)

标签 reactjs material-ui

使用 React Material UI 库 ( v1.0 beta ) 中的 Input 组件,我尝试删除使用伪元素呈现的下划线。

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 时,出现以下错误。覆盖样式并删除此下划线的正确方法是什么?

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

最佳答案

根据 DOC .

disableUnderline prop =>

disableUnderline : boolean

Default Value: false

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

DOC提供了一个属性disableUnderline,我们可以直接使用它来删除输入元素的下划线。

试试这个:

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

关于reactjs - 从输入组件 Material UI 中删除下划线(v1.0 Beta),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45638603/

相关文章:

javascript - 如何在 react 中进行双json外部调用

javascript - 如何在 React 中处理已 checkin 的输入类型 ='checkbox'?

reactjs - 如何添加覆盖单个组件(例如 Paper 而不是整个屏幕)的背景幕

javascript - 为什么它不连续写入文本字段?

reactjs - MUI 的 Autocomplete AS MULTIPLE input + react-hook-form + 控制默认值不起作用(TypeError : Can't read property 'filter' of undefined)

javascript - 渲染 displaySIngleElement 组件 onClick react

reactjs - 如何更改 Material ui 选择菜单下拉颜色?

reactjs - 使用 defaultProps 样式化的 React Material UI v5

javascript - 如何更改 Material ui TextField 的标签大小?

javascript - 具有 React 的 datetime-local 值