如何去掉material-ui select的下划线？答案

【问题标题】：how to remove the underline of material-ui select?如何去掉material-ui select的下划线？
【发布时间】：2021-05-28 04:36:01
【问题描述】：

我需要在悬停时删除 Material UI Select 列表的下划线。

我试过https://codesandbox.io/s/nifty-rubin-6x9po?file=/src/Dropdown.jsx，它默认会删除下划线，但是当悬停时，下划线仍然显示

我提到了How to change Material UI input underline colour? 和Removing underline style of autocomplete in react material ui component，但都处理了如何显示，我完全想从选择列表中删除下划线。任何帮助表示赞赏，谢谢:)

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

将disableUnderline 属性添加到Select。这是您的沙盒的修改版本：https://codesandbox.io/s/disable-underline-xulxq?file=/src/Dropdown.jsx。

相关答案：

【讨论】：

这个道具似乎已从 v5 文档中删除，尽管它似乎仍然有效。我想知道 v5 的建议方法是什么？
@dmarr 也支持 input 的 props。 disableUnderline 是 Input 的道具之一。

【解决方案2】：

只需添加disableUnderline 属性来选择组件，您将不再看到边框底部：

<Select
    labelId='demo-simple-select-label'
    id='demo-simple-select'
    value={user.status}
    classes={{
        root: classes.selectControl,
        icon: classes.arrowDownIcon,
    }}
    disableUnderline
> 
   ...
</Select>;

【讨论】：