MUI组件Styled Components主题切换样式生产环境不生效

问题背景 #

在使用Material-UI（MUI）开发的应用中，采用Styled Components实现的主题上下文样式，在生产构建环境切换明暗主题时无法生效，但本地开发环境（localhost）一切正常。已确认主题在全应用正确提供，主题对象属性名无误，问题集中在StyledAccordion组件。

相关代码 #

组件代码（已删减冗余JSX） #

import {
  StyledSection,
  StyledArticle,
  StyledTextWrapper,
  StyledRozniceWrapper,
  StyledCard,
  StyledTitleWrapper,
  StyledAccordionWrapper,
  StyledAccordion,
  StyledAccordionDetails,
  StyledHeading,
  StyledButtonWrapper,
} from './rozniceSection.css';

import AccordionSummary from '@mui/material/AccordionSummary';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import { StyledDiv } from '../_shared/styles/globalStyles';

import CustomLink from '../_shared/ui/customLink';

import Image from 'next/image';

const RozniceSection = (): JSX.Element => {
  const [isClientSide, setIsClientSide] = useState<boolean>(false);

  const { current: currentTheme } = useSelector((state: GlobalState) => state.theme);

  useEffect(() => {
    setIsClientSide(true);
  }, []);

  return (
    <StyledSection>
      <StyledArticle>
        <StyledRozniceWrapper>
          <StyledDiv style={{ border: '3px solid #FCCF5B' }}>
            <StyledCard>
              <StyledAccordionWrapper>
                <StyledAccordion>
                  <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                  >
                    <StyledHeading>
                      <span>
                        <Image height={2} width={155} alt="line" src="/decoration/line-thin.svg" />
                        Usługi dla mikro i małych
                      </span>{' '}
                      przedsiębiorców
                    </StyledHeading>
                  </AccordionSummary>
                  <StyledAccordionDetails>
                    <p>
                     Description …
                    </p>
                  </StyledAccordionDetails>
                </StyledAccordion>
              </StyledAccordionWrapper>
            </StyledCard>
          </StyledDiv>
        </StyledRozniceWrapper>

        <StyledButtonWrapper>
          <CustomLink href="/o-inicjatywie">Czytaj Więcej</CustomLink>
        </StyledButtonWrapper>
      </StyledArticle>
    </StyledSection>
  );
};

export default RozniceSection;

Styled Components代码 #

'use client';

import styled from 'styled-components';

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

export const StyledAccordion = styled(Accordion)`
  background-color: ${({ theme }) => theme.cardBackground};
  border: ${({ theme }) => '1px solid' + theme.cardBorder};
  box-shadow: none;
`;

原因分析及修复方案 #

核心原因 #

1. 生产环境Styled Components静态优化限制
   开发环境下Styled Components会动态注入样式，而生产环境为了性能会做静态样式提取。如果主题切换没有触发组件重渲染，静态提取的旧样式不会自动更新。

2. 组件未响应主题变化触发更新
   组件通过useSelector获取了currentTheme，但未将其作为依赖触发重渲染逻辑，也没有传递给StyledAccordion作为更新信号，导致主题变化时组件不会重新渲染，Styled Components无法获取新的主题值。

3. SSR/SSG场景下的样式不匹配（若使用Next.js）
   生产环境SSR/SSG会在服务端渲染初始主题样式，客户端切换主题时，旧的服务端样式可能未被替换，加上isClientSide状态仅在首次挂载时更新，无法响应后续主题变化。

修复步骤 #

• 强制组件响应主题变化重渲染
  给StyledAccordion添加key属性，值为currentTheme，主题切换时强制组件重新挂载，从而获取新的主题样式：

  <StyledAccordion key={currentTheme}>
    {/* ... 原有内容 ... */}
  </StyledAccordion>
  

• 监听主题变化触发重渲染
  添加依赖currentTheme的useEffect，确保主题变化时组件能感知并更新：

  useEffect(() => {
    // 主题变化时触发组件重渲染
  }, [currentTheme]);
  

• 检查Styled Components Babel配置
  确保babel-plugin-styled-components配置正确，支持动态主题的SSR处理，在.babelrc或next.config.js中配置：

  {
    "plugins": [
      ["styled-components", { "ssr": true, "displayName": true }]
    ]
  }
  

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