您可以使用全局覆盖来更改 AccordionSummary 的默认边距。但是,这将影响应用程序中的所有 AccordionSummary 组件。
更好的方法(您已经在使用的方法)是包装组件并更改其类。如果您查看 AccordionSummary 的来源,您会发现该expanded
属性是一个空块。边距由content
属性中的引用选择器设置:
content: {
display: 'flex',
flexGrow: 1,
transition: theme.transitions.create(['margin'], transition),
margin: '12px 0',
'&$expanded': {
margin: '20px 0',
},
},
如果您在自定义样式中添加相同的引用,则优先级会更高,您将不需要!important
. 但是,您必须将expanded
className 添加到您的自定义样式中:
import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles'
import Accordion from '@material-ui/core/Accordion';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import AccordionSummary from '@material-ui/core/AccordionSummary';
const useStyles = makeStyles(() => ({
expanded: {},
content: {
'&$expanded': {
marginBottom: 0,
},
},
}));
const MyAccordion = ({ summary, details }) => {
const classes = useStyles();
return (
<Accordion>
<AccordionSummary classes={{ content: classes.content, expanded: classes.expanded }}>
{summary}
</AccordionSummary>
<AccordionDetails>
{details}
</AccordionDetails>
</Accordion>
)
};
export default MyAccordion;