覆蓋子組件中的Material-UI CSS

Question

我想在ExpansionPannel更改expandIcon的right屬性：

  <ExpansionPanel>
    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
      <Typography className={classes.heading}>Expansion Panel 1</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>

默認情況下， ExpandMoreIcon的屬性right值為8px 。 我想將其更改為-8px所以嘗試了：

const styles = theme => ({
    expandIcon: {
        right: "-8px"
    }
})
...

<ExpansionPanelSummary 
    className={classNames(classes.myCustomClass, {expandIcon: classes.expandIcon})} 
    expandIcon={<ExpandMoreIcon />}
>

我還需要這個myCustomClass 。

但這不會覆蓋CSS。 同樣，設置<ExpandMoreIcon style={{right: "-8px"}}/>也無濟於事。

Answer 1

發現我的問題，這是一個錯字！

我不得不重寫的類傳遞給classes道具，而不是className ！

<ExpansionPanelSummary 
    className={classes.myCustomClass}
    classes={{expandIcon: classes.expandIcon}} 
    expandIcon={<ExpandMoreIcon />}
>