首页 文章

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

提问于
浏览 次
8

使用React Material UI库中的 Input 组件（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：在提供给类之前，属性对象未在Input中实现 . 您只能覆盖以下内容之一：root，formControl，inkbar，error，input，disabled，focused，underline，multiline，inputDisabled，inputSingleline，inputMultiline，fullWidth，label .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-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-输入3582851417：专注:: - MS-输入占位符，.MuiInput下划线-892978022：以前，.MuiInput下划线-892978022：悬停：没有（.MuiInput禁用-265053423）：之前，.MuiInput下划线-892978022 .MuiInput禁用-265053423：前

reactjs material-ui

2 回答

  • 13

    根据 DOC.

    disableUnderline prop => disableUnderline：boolean默认值：false Details：如果为true，则输入不会有下划线 .

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

    试试这个：

    <Input
     disableUnderline={true}     //here
     classes={classes}
     placeholder={placeholder}
     value={value}
     onChange={onChange} />
    回复于
  • 0

    把css标记给app.css，它对我有用 . 因为它使用基本标签
    一个{text-decoration：none}

    回复于

相关问题