如何在export const写法的React组件中修改MUI Accordion的CSS样式？

1. export default 和 export const 的区别 #

二者是ES模块规范中两种不同的导出方式，和MUI组件的样式逻辑没有任何关联，你无需修改现有export const的写法即可适配所有MUI样式方案，二者核心差异：

• export default 是默认导出，单个文件仅可存在1个，导入时可自定义命名，写法为 import CustomName from './component-file'
• export const 是命名导出，单个文件可存在多个，导入时名称必须和导出名一致且需用大括号包裹，写法为 import { Cbutes } from './component-file'

2. MUI组件样式修改方案 #

Tailwind类名不生效的原因是MUI组件默认样式的CSS优先级高于普通全局Tailwind类，可选以下三种方案解决，都可直接适配你现有的代码结构：

方案1：快速适配Tailwind类 #

只需在Tailwind类名前加!强制提升优先级即可生效：

<Accordion className="!bg-blue-500 !text-white !rounded-lg">

方案2：使用MUI内置sx属性（推荐临时自定义样式） #

sx是MUI官方提供的轻量样式方案，优先级最高，支持直接写CSS属性、调用MUI主题变量：

<Accordion
  sx={{
    // 自定义背景色
    backgroundColor: '#165DFF',
    color: '#fff',
    // 自定义圆角、阴影
    borderRadius: '8px',
    boxShadow: 'none',
    // 自定义展开状态样式
    '&.Mui-expanded': {
      backgroundColor: '#0C3483',
      margin: 0
    },
    // 直接修改内部子组件样式
    '& .MuiAccordionSummary-root': {
      minHeight: '48px'
    }
  }}
>

方案3：使用styled封装复用组件（推荐多场景复用样式） #

如果该样式的Accordion需要在多个地方使用，可以用MUI的styled方法封装自定义组件：

import { styled } from '@mui/material/styles'
import Accordion from '@mui/material/Accordion'

// 封装自定义样式的Accordion
const CustomAccordion = styled(Accordion)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.common.white,
  borderRadius: '8px',
  boxShadow: 'none',
  '&.Mui-expanded': {
    backgroundColor: theme.palette.primary.dark,
    margin: 0
  }
}))

// 业务代码中直接使用
<CustomAccordion>
  {/* 原有内容 */}
</CustomAccordion>

完整修改后代码示例（以sx方案为例） #

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';

export interface CProps {
  data: any;
}

export const Cbutes: React.FC<CProps> = ({ data }) => {
    return <div>
      <Accordion
        sx={{
          backgroundColor: 'blue',
          color: 'white',
          borderRadius: '8px',
          '&.Mui-expanded': {
            backgroundColor: 'darkblue'
          }
        }}
      >
        <AccordionSummary
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>;
};

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