Material UI中如何通过makeStyles重写AccordionDetails的默认display:flex样式

解决方案 #

你只需要两步操作即可覆盖默认样式：

1. 编辑使用makeStyles定义样式的JS文件，新增自定义样式规则：

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  // 此处保留你已有的其他样式定义（如accordion、customCheckMark、typography等）
  accordionDetails: {
    // 替换为你需要的display属性值，比如block、inline-flex等
    display: 'block'
  }
}))

2. 在通知设置组件中，给AccordionDetails组件绑定刚才定义的自定义类：
   找到代码中对应的标签，修改为如下内容即可：

<AccordionDetails className={classes.accordionDetails}>

注：Material UI中makeStyles生成的自定义类优先级高于组件内置的默认样式，绑定后仅会覆盖你声明的display属性，原有的padding等其他默认样式会保留，不需要额外重写。

内容的提问来源于stack exchange，提问作者Arundeep Chohan