如何删除 Material UI 手风琴上方的线条？

Question

我正在尝试使用 Material UI 实现 Accordion 组件。
我面临的问题是，尽管我更喜欢白色背景，但会在组件上方自动插入一条灰线。我怎样才能删除它？这是演示代码。Material UI 手风琴组件演示

Answer 1

随着Material-UI v5.0.0-beta.0的发布，通过使用新的sxprop自定义样式变得更加容易。

自 v5 起，该sx属性可用于所有 Material-UI 组件。在我们的世界中，这消除了对黑客风格覆盖和自定义类的需要。

以下是如何使用道具删除“手风琴上方的线” sx={}。

return (
    <Accordion
        disableGutters
        elevation={0}
        sx={{
            '&:before': {
                display: 'none',
            }
        }}>
        <AccordionSummary expandIcon={<ExpandMore/>}>
            ...your summary here...
        </AccordionSummary>
        <AccordionDetails sx={{ maxWidth: '480px' }}>
            ...your details here...
        </AccordionDetails>
    </Accordion>
);

请注意，我也将sx道具传递给了。<AccordionDetails/>

你必须传递一个对象，sx所以你总是会有一对大括号......

sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}

Answer 2

Ciao，要使灰线变白，您必须覆盖Accordion元素的 css 类。

灰线来自.MuiAccordion-root:before风格。因此，首先更改Accordion道具添加classes道具，例如：

...
<Accordion
   elevation={0}
   classes={{
      root: classes.MuiAccordionroot
   }}
>
...

然后在您useStyles添加：

MuiAccordionroot: {
    "&.MuiAccordion-root:before": {
      backgroundColor: "white"
    }
  }

灰线变成白色。这里修改了你的代码。