Css 如何从材质UI更改组件的默认行为

我正在使用materialUI显示扩展面板，如以下代码所示：

import React from 'react'
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';

function ExpansionPanelDemo(props) {
  const {curr} = props 
  return (
    <div>

        <ExpansionPanel id={curr.id}>

             <ExpansionPanelSummary  expandIcon={<ExpandMoreIcon />}>
                <Typography>{curr.name}</Typography>
             </ExpansionPanelSummary>

             <ExpansionPanelDetails>
                <Typography> {curr.content} </Typography>
             </ExpansionPanelDetails>

        </ExpansionPanel>

    </div>
)
}

export default ExpansionPanelDemo

从“React”导入React
从“@material ui/core/ExpansionPanel”导入ExpansionPanel；
从“@material ui/core/ExpansionPanelSummary”导入ExpansionPanelSummary；
从“@material ui/core/ExpansionPanelDetails”导入ExpansionPanelDetails；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
功能扩展面板演示（道具）{
常量{curr}=props
返回(
{curr.name}
{curr.content}
)
}
导出默认ExpansionPanelDemo

它工作正常，但默认情况下，它会在屏幕右侧显示展开图标，我想修改它并在面板左侧显示图标

我尝试使用文档中给出的“IconButtonProps”道具进行此操作，并对代码进行了如下修改：

 import React from 'react'
 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';

 function ExpansionPanelDemo(props) {
   const {curr} = props
   const icon = {
     float: "left"
   }

   return (
    <div>

        <ExpansionPanel id={curr.id}>

             <ExpansionPanelSummary  expandIcon={<ExpandMoreIcon />} IconButtonProps={icon}>
                <Typography>{curr.name}</Typography>
             </ExpansionPanelSummary>

             <ExpansionPanelDetails>
                <Typography> {curr.content} </Typography>
             </ExpansionPanelDetails>

        </ExpansionPanel>

    </div>
)
 }

 export default ExpansionPanelDemo

从“React”导入React
从“@material ui/core/ExpansionPanel”导入ExpansionPanel；
从“@material ui/core/ExpansionPanelSummary”导入ExpansionPanelSummary；
从“@material ui/core/ExpansionPanelDetails”导入ExpansionPanelDetails；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
功能扩展面板演示（道具）{
常量{curr}=props
常量图标={
浮动：“左”
}
返回(
{curr.name}
{curr.content}
)
}
导出默认ExpansionPanelDemo

---

但有些东西坏了，代码不起作用。是否有人可以建议左侧显示图标的错误或任何其他方法

ExpansionPanelSummary

在

内容

和

expansionicon

周围使用。要重新排序，可以使用CSS属性或CSS属性。另一个使这看起来像样的更改是将

IconButton

上的

edge

属性从翻转到

start

以下是一个工作示例：

import React from "react";
import { withStyles, makeStyles } 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 useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));

const FlippedOrderExpansionPanelSummary = withStyles({
  root: {
    flexDirection: "row-reverse"
  }
})(ExpansionPanelSummary);
FlippedOrderExpansionPanelSummary.defaultProps = {
  IconButtonProps: { edge: "start" }
};

export default function SimpleExpansionPanel() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <ExpansionPanel>
        <FlippedOrderExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Expansion Panel 1</Typography>
        </FlippedOrderExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
      <ExpansionPanel>
        <FlippedOrderExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography className={classes.heading}>Expansion Panel 2</Typography>
        </FlippedOrderExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{withStyles，makeStyles}”；
从“@material ui/core/ExpansionPanel”导入ExpansionPanel；
从“@material ui/core/ExpansionPanelSummary”导入ExpansionPanelSummary；
从“@material ui/core/ExpansionPanelDetails”导入ExpansionPanelDetails；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
const useStyles=makeStyles（主题=>({
根目录：{
宽度：“100%”
},
标题：{
fontSize：主题。排版。pxToRem（15），
fontWeight:theme.typography.fontWeightRegular
}
}));
常量FlippedOrderExpansionPanelSummary=带样式({
根目录：{
flexDirection：“行反转”
}
})（扩展面板摘要）；
FlippedOrderExpansionPanelSummary.defaultProps={
IconButtonProps:{edge:“开始”}
};
导出默认函数SimpleExpansionPanel（）{
const classes=useStyles（）；
返回(
扩展面板1
Lorem ipsum dolor sit amet，奉献精英。Suspendisse
malesuada lacus前，坐着amet blandit leo lobortis eget。
扩展面板2
Lorem ipsum dolor sit amet，奉献精英。Suspendisse
malesuada lacus前，坐着amet blandit leo lobortis eget。
);
}

相关文件：