如何在react中更改accordionSummary的高度？

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import './styles.css'; // 导入自定义样式文件（可选）

function MyAccordion() {
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel-content"
        id="panel-header"
        // 在这里设置高度
        style={{ height: '100px' }}
      >
        {/* 标题内容 */}
      </AccordionSummary>
      <AccordionDetails>
        {/* 内容详情 */}
      </AccordionDetails>
    </Accordion>
  );
}

/* styles.css */
.my-accordion-summary {
  height: 100px;
}

<AccordionSummary
  expandIcon={<ExpandMoreIcon />}
  aria-controls="panel-content"
  id="panel-header"
  className="my-accordion-summary"
>
  {/* 标题内容 */}
</AccordionSummary>

ReactDOM.render(<MyAccordion />, document.getElementById('root'));