覆盖材质UI扩展面板摘要

Question

expansionPanelSummary: {
        content: {
            "& > :last-child": {
                paddingRight: 0
            }
        },
        expandIcon: {
            top: "80%"
        }
    }

我正在尝试覆盖Material UI扩展面板组件的样式，但是无法获得结果

<ExpansionPanelSummary
                    expandIcon={<ExpandMoreIcon color="primary" />}
                    classes={{ content: classes.expansionPanelSummary.content, expandIcon: classes.expansionPanelSummary.expandIcon}}
                >

我无法在主题级别覆盖它，因为该组件已在其他地方使用默认设置。

Answer 1

您似乎已在styles对象中添加了一个附加级别（“ expansionPanelSummary”）。那是无效的。传递给styles的{​​{1}}对象的顶级属性将变成类。在您的示例中，withStyles的值是JSS生成的类名，而classes.expansionPanelSummary不会。

这是所需语法的示例：

classes.expansionPanelSummary.content

我只是将import React from "react"; import { withStyles } from "@material-ui/core/styles"; import ExpansionPanel from "@material-ui/core/ExpansionPanel"; import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"; import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"; import Typography from "@material-ui/core/Typography"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; const styles = { expansionPanelSummaryContent: { "& > :last-child": { paddingRight: 100 } }, expansionPanelSummaryExpandIcon: { top: "80%" } }; function SimpleExpansionPanel(props) { const { classes } = props; return ( <div> <ExpansionPanel> <ExpansionPanelSummary classes={{ content: classes.expansionPanelSummaryContent, expandIcon: classes.expansionPanelSummaryExpandIcon }} expandIcon={<ExpandMoreIcon />} > <Typography className={classes.heading}> Expansion Panel 1 - increasing the amount of content so that I can tell a difference when the padding-right is altered. </Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> <Typography> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. </Typography> </ExpansionPanelDetails> </ExpansionPanel> </div> ); } export default withStyles(styles)(SimpleExpansionPanel); 更改为100，这样我可以很容易地看到一种效果，可以验证它是否已应用。

它在CodeSandbox中：