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

让我知道它是否有效！

CSS覆盖无效。组件CSS覆盖的覆盖。如何解决？

1 个答案: