覆盖 Material 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")。那是无效的。传递给 withStyles 的 styles 对象的顶级属性将变成类。在您的示例中，classes.expansionPanelSummary 将具有一个由 JSS 生成的类名的值，但 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);

我将 paddingRight 更改为 100，这样我就可以很容易地看到效果以验证它是否被应用。

它在 CodeSandbox 中：

覆盖 Material UI 扩展面板摘要

Override Material UI Expansion Panel Summary

reactjs

material-ui

jss