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

Question

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

- Sumiya Sayeed

Answer 1

您应该可以将高程设置为0，这样就可以去除 box-shadow 效果：

<Accordion elevation={0}>

(注意：ExpansionPanel已更名为Accordion)

- krishna

Answer 2

这适用于版本号为"@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}>

- remacr

---

你应该受到崇拜。 - Outside_Box

Answer 3

尝试编辑 expansion-panel 类的css（我猜你是指阴影，没有边框）

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

- Victor Jozwicki

---

为了同时消除顶部边框和阴影，我不得不结合Victor和Raul的答案。样式对象最终看起来像这样：const useStyles = makeStyles({ hideBorder: { boxShadow: 'none', '&.MuiExpansionPanel-root:before': { display: 'none', }, }, }) - Davis Jones

@Sumiya Sayeed，这样做可以解决你的问题吗？ - Victor Jozwicki

Answer 4

在mui 5.11中，以下方法适用于我：

- Mangesh Gosavi

Answer 5

这对我很有用：@mui/material: ^5.8.7

我创建了以下样式：

const AccordionStyle = {
  '&:before': {
    backgroundColor: 'transparent !important',
  },
};

我在sx中使用了这种样式。

<Accordion sx={AccordionStyle}>
</Accordion>

- yathavan

Answer 6

这适用于@mui/material 5.1.0版本：

MuiAccordion: {
 styleOverrides: {
  root: {
    "&:before": {
      backgroundColor: "transparent",
    },
  },
 },
},

- keemor

Answer 7

这对我有用 @mui/material: ^5.11.12

给mat-expansion-panel一个类名为mat-elevation-z0

可能需要调整背景颜色，但至少可以去掉边框阴影

<mat-accordion>
 <mat-expansion-panel class="mat-elevation-z0" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

- mdharr

Answer 8

border: 'none'

这对我很有帮助。

- Alex Doroșin