Material -UI InputBase 组件中显示下划线

【问题标题】：Underline showing in Material -UI InputBase componentMaterial -UI InputBase 组件中显示下划线
【发布时间】：2021-03-04 04:59:34
【问题描述】：

我有一个由 InputBase 组件组成的搜索栏。为什么会有下划线？ InputBase 应该是普通的（没有装饰）这是该项目的 github 链接。 https://github.com/brayomwas/codelab。搜索栏在 src/components 下

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

使用disableUnderline 属性

<InputBase 
   className={classes.input}
   placeholder='Search'
   InputProps={{'aria-label': 'search', disableUnderline : true }}
/>

或使用 makeStyles

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  underline: {
    "&&&:before": {
      borderBottom: "none"
    },
    "&&:after": {
      borderBottom: "none"
    }
  }
});


<InputBase 
   className={classes.input}
   placeholder='Search'
   InputProps={{'aria-label': 'search',classes }}
/>

【讨论】：