如何将展开图标定位在手风琴的右侧，同时将文本保持在中心？答案

【问题标题】：How to position expand icon on the right side of the accordion while keeping the text in the center?如何将展开图标定位在手风琴的右侧，同时将文本保持在中心？
【发布时间】：2021-04-06 05:30:57
【问题描述】：

我正在学习 Material UI，我希望我的扩展图标保持在手风琴的右侧，而不是随着文本移动到中心。我尝试了几个选项，但都没有达到预期的结果。

我的问题是如何将图标放在手风琴的右侧？

codesandbox example

const Accordion = withStyles({
  root: {
    border: 'none',
    boxShadow: 'none',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiAccordion);

const AccordionSummary = withStyles({
  root: {
    backgroundColor: 'rgba(0, 0, 0, .03)',
   // borderBottom: '1px solid rgba(0, 0, 0, .125)',
    marginBottom: -1,
    minHeight: 56,
    '&$expanded': {
      minHeight: 56,
    },
  },
  content: {
    flexGrow: 0,
    '&$expanded': {
    flexGrow: 0,
      margin: '12px 0',
    },
  },
  expanded: {},
  expandIcon:{
    order: 0,
  },
})(MuiAccordionSummary);

const AccordionDetails = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2),
  },
}))(MuiAccordionDetails);



export default function CustomizedAccordions() {
  const [expanded, setExpanded] = React.useState('panel1');

  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };

  return (

    <div>
      <Accordion square expanded={expanded === 'panel1'} onChange={handleChange('panel1') }>
        <AccordionSummary 
           aria-controls="panel1d-content" 
           expandIcon={<ExpandMoreIcon />}
           id="panel1d-header">
          <Typography>Collapsible Group Item #1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
             Test
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary 
            aria-controls="panel2d-content" 
            expandIcon={<ExpandMoreIcon />}
            id="panel2d-header">
          <Typography>Collapsible Group Item #2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
                   Test
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

只需像这样删除 flexGrow 属性：

const AccordionSummary = withStyles({
  root: {
    backgroundColor: "rgba(0, 0, 0, .03)",
    // borderBottom: '1px solid rgba(0, 0, 0, .125)',
    marginBottom: -1,
    minHeight: 56,
    "&$expanded": {
      minHeight: 56
    }
  },
  content: {
  
    "&$expanded": {
     
      margin: "12px 0"
    }
  },
  expanded: {},
  expandIcon: {
    order: 0
  }
})(MuiAccordionSummary);

这里是sandBox

【讨论】：

【解决方案2】：

您也可以简单地将 flexGrow 的值保持为 1，效果相同。

【讨论】：

【解决方案3】：

在您的内容类中添加以下内容：

  content: {
    flexGrow: 0,
    margin: "auto",
    "&$expanded": {
     flexGrow: 0,
     margin: "auto",
    },
    "&:last-child": {
     marginLeft: "auto"
    }
   },

添加自动边距并指定最后一个子级应该具有自动边距，这样您就可以在手风琴右侧有箭头的同时保持文本居中。如果您有任何问题，请查看此分叉沙箱：https://codesandbox.io/s/goofy-driscoll-xvzd5?file=/src/App.js:922-1097

【讨论】：

【解决方案4】：

Jean182 的回答对我有用，但它覆盖了我想保留的标题文本的自动下边距和上边距。这是我的 css，以及必要的导入和 withStyles 呼吁任何可能受益于看到它的人明确：

import { AccordionSummary } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

const StyledAccordionSummary = withStyles({
  content: {
    flexGrow: 0,
    margin: "auto",
    marginTop: 12,
    marginBottom: 12,
    "&$expanded": {
     flexGrow: 0,
     margin: "auto",
    },
    "&:last-child": {
     marginRight: "auto"
    }
  },
})(AccordionSummary);

然后使用 StyledAccordionSummary 组件，您将使用 AccordionSummary 组件。

【讨论】：