如何在Material-UI中删除扩展面板的边框？

Question

如何在Material-UI中删除扩展面板区域的边框？

Answer 1

这适用于版本“ @ material-ui / core”：“ 4.9.9 ”

您可以将以下内容应用于整个主题：

const theme = createMuiTheme({
  overrides: {
    MuiExpansionPanel: {
      root: {
        '&:before': {
          display: 'none'
        },
      },
    },
  }
}

或者如果只需要一个组件，则可以通过类样式将其隐藏：

import { makeStyles } from '@material-ui/core/styles'

....
const useStyles = makeStyles({
  hideBorder: {
    '&.MuiExpansionPanel-root:before': {
      display: 'none',
    },
  },
})

....
const classes = useStyles()

.....
<ExpansionPanel className={classes.hideBorder}>

Answer 2

尝试编辑expansion-panel类的CSS（我想你是说盒子阴影，没有边框）

.expansion-panel {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Answer 3

您应该能够将高度设置为 0，这将移除框阴影：

<Accordion elevation={0}>

（注意：ExpansionPanel 已更名为 Accordion）

Answer 4

border: 'none'

这帮助了我。