Question

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

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

Answer 1

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

您可以在此沙盒中找到一个可行的示例，并检查它是否适合您： https://codesandbox.io/s/03x2r4lw2w

Answer 2

只需将backGroundImage分配给您的.head类：

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

自定义Material UI 1.3.1扩展面板

2 个答案: