CSS 覆盖不起作用。被组件 CSS 覆盖。怎么修？

Question

我正在尝试在 material-ui ExpansionPanel 组件展开时移除边距，但无法使其工作。

我的代码如下：

const styles = {
    expanded: {
        margin: "0px",
    }
}

const Result = props => {

    const { classes } = props;

    return (
        <ExpansionPanel
            defaultExpanded
            classes={{expanded: classes.expanded}}
        >
            <ExpansionPanelSummary>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
        </ExpansionPanel>
    );
}

export default withStyles(styles)(Result);

当我检查源时，我的覆盖：

.Result-expanded-1x42rei {
    margin: 0;
}

在组件css下方：

.MuiExpansionPanel-expanded-60 {
    margin: 16px 0;
}

为什么我的覆盖会被组件 CSS 覆盖？ 如果我将css设置为！important，它会起作用，但有人告诉我这是“非法的”。我该如何解决？

更新：当我在 codesandbox.io 中编写完全相同的代码时，它可以工作...

Update2 它不起作用的原因是因为我从 @material-ui/styles 而不是 @material-ui/core/styles 导入 withStyles

Answer 1

我之前也尝试过，但我没有为我工作。我最终采用了覆盖 CSS 的简写方式。

import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";

const ExpansionPanel = withStyles({
  root: {

  },
  expanded: {
    margin: 0
  }
})(MuiExpansionPanel);

const styles = {
}

const Result = props => {

    const { classes } = props;

    return (
        <ExpansionPanel
            defaultExpanded
        >
            <ExpansionPanelSummary>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
        </ExpansionPanel>
    );
}

export default withStyles(styles)(Result);

让我知道它是否有效！！！