Align text in AccordionSummary to the right?

Question

I'm working with the Accordion component from Material-UI (https://material-ui.com/api/expansion-panel-summary/). It seems like by default, regardless of what I do, the text (specifically the word 'Filter' which appears in AccordionSummary) is aligned to the left. How can I change this so it aligned to the right?

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

Answer 1

The AccordionSummary component primarily uses flex containers so textAlign won't do that work for you. You can use justifyContent instead. You may target the content rule name to specifically target the content (i.e., your Filter text) of AccordionSummary

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

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