CSS 覆盖不起作用.覆盖被组件 CSS 覆盖.如何解决

Question

我试图在展开时从材料用户界面扩展面板组件中删除边距，但无法使其工作。

我的代码如下：

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);

让我知道它是否有效!!