如何去除material-ui select的下划线？

Question

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

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

我提到了如何更改 Material UI 输入下划线颜色？和删除反应材料 ui 组件中自动完成的下划线样式，但都处理了如何显示，我完全想从选择列表中删除下划线。任何帮助表示赞赏，谢谢:)

Answer 1

只需将disableUnderlineprop 添加到选择组件，您将不再看到 border-bottom：

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

Answer 2

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

相关回答：

• 如何从 Material-UI 中删除 TextField 的下划线？
• 如何在不使用 MUIThemeProvider 的情况下覆盖 material-ui TextField 组件的样式？