在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'));
这样,你就可以在React中更改AccordionSummary的高度了。根据你的需求,可以通过直接设置style属性或者使用自定义样式来实现。
领取专属 10元无门槛券
手把手带您无忧上云