从 Input 组件 Material UI 中移除下划线（v1.0 Beta）答案

【问题标题】：Remove underline from Input component Material UI (v1.0 Beta)从 Input 组件 Material UI 中移除下划线（v1.0 Beta）
【发布时间】：2018-01-20 04:08:03
【问题描述】：

使用来自 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 时，我收到以下错误。覆盖样式并删除此下划线的正确方法是什么？

警告：Material-UI：关键 .searchInput-underline-1572343541:before 提供给班级属性对象在 Input 中没有实现。

您只能覆盖以下选项之一：根，formControl，墨条，错误，输入，禁用，聚焦，下划线，多行，inputDisabled，inputSingleline，inputMultiline，fullWidth，标签 + .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，标签 + .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:之前

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

根据DOC。

disableUnderline 道具 =>

disableUnderline : 布尔值

默认值：假

详细信息：如果为 true，则输入将没有下划线。

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

试试这个：

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

【讨论】：

如果覆盖下划线会怎样？

【解决方案2】：

将 css 标签添加到 app.css，它对我有用。因为它使用基本标签
一种 { 文字装饰：无 }

【讨论】：

虽然这可能会回答作者的问题，但它缺少一些解释性文字和文档链接。如果没有围绕它的一些短语，原始代码 sn-ps 并不是很有帮助。您可能还会发现how to write a good answer 非常有帮助。请编辑您的答案。
下划线不是文字装饰。这是一个边界底部，所以这甚至行不通。