将AccordionSummary中的文本右对齐？

问题描述

我正在使用Material-UI（https://material-ui.com/api/expansion-panel-summary/）中的Accordion组件。无论我做什么，默认情况下，文本（尤其是AccordionSummary中出现的单词“ Filter”）似乎都左对齐。我该如何更改它以使其与右侧对齐？

<Accordion>
 <AccordionSummary expandIcon={<FilterListIcon style={{color: 'white'}} />}
                    style={{backgroundColor: 'black',color: 'white',textAlign: "right"}}> 
                    Filter
 </AccordionSummary>
  <AccordionDetails style={{backgroundColor: 'black',color: 'white'}}>
         //Some details here
  </AccordionDetails>
</Accordion>

解决方法

AccordionSummary组件主要使用flex容器，因此textAlign不会为您完成此工作。您可以改用justifyContent。您可以定位content规则名称以专门定位AccordionSummary的内容（即您的过滤器文本）

const useStyles = makeStyles({
  customAccordionSummary: {
    justifyContent: "flex-end"
  }
})

function App() {
  const classes = useStyles();
  return (
    <Accordion>
      <AccordionSummary
        classes={{ content: classes.customAccordionSummary }}
        ...