自定义 Material UI 1.3.1 扩展面板答案

【问题标题】：Customizing the Material UI 1.3.1 Expansion Panel自定义 Material UI 1.3.1 扩展面板
【发布时间】：2018-07-10 17:17:59
【问题描述】：

我在标题上有背景图片，但是当我打开它时，图片会继续显示在正文中。有没有办法让扩展文本与标题的背景不同？提前致谢！

const styles = theme => ({
    expansion: {
        backgroundImage: `url(${Tuesday})`,
        width: "100%"
    },
    head: {
        height: '84px'
    },
    text: {
        color: 'white',
        fontSize: '32px',
        fontFamily: 'AvenirNext-Heavy'
    },
    body: {
        backgroundImage: 'none'
    }
});

const ExpandedMenu = (props) => {
const { classes } = props;
return(
    <div>
        <ExpansionPanel className={classes.expansion}>
            <ExpansionPanelSummary className={classes.head} expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.text}>TUESDAY</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails className={classes.body}>
            <Typography className={classes.body}>
                <p>example text</p>
            </Typography>
            </ExpansionPanelDetails>
        </ExpansionPanel>
     </div>
    )
}

【问题讨论】：

您是否尝试过使用withStyles？
是的，我现在的问题是当它展开时，body 仍然有 backgroundImage。如果您有任何见解，我已经更新了代码！

标签： css reactjs material-design styling

【解决方案1】：

只需将backGroundImage 提供给您的.head 班级：

this sandbox 是@SumanKundu 构建的，我对其进行了更改以满足您的需求。

【讨论】：

【解决方案2】：

您可以简单地添加内联样式，但正如@TFischer 所说，withStyles 将是一个更好的选择。

您可以转到此沙箱查看一个工作示例并检查它是否适合您： https://codesandbox.io/s/03x2r4lw2w

【讨论】：

有没有办法让标题只有背景图片，而不是当它展开时，文本区域继承背景？