MUI 组件 - 当应用程序的主题模式更改时，主题上下文（样式化组件）中的样式不适用于生产环境

Question

在 Material-UI (MUI) 组件中，当应用程序的主题模式更改时，使用样式化组件实现的主题上下文中的样式不会应用于生产版本。

主题模式：浅色和深色。 在开发模式下，一切都在本地主机上正常工作。

正确提供了

theme

（适用于整个应用程序）。

theme

对象属性名称也是正确的。

组件（我删掉了一些不必要的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;

样式组件

'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;
`;

知道是什么原因导致了这个问题吗？

Answer 1

经过几个小时的搜索和浏览 MUI 文档，我找到了答案。对于那些可能遇到同样问题的人，我在下面发布了答案。

https://mui.com/material-ui/guides/interoperability/#css-injection-order

注意：大多数 CSS-in-JS 解决方案都会在 HTML 底部注入样式，这使得 Material UI 优先于您的自定义样式。要消除对 !important 的需要，您需要更改 CSS 注入顺序。以下是如何在 Material UI 中完成此操作的演示。

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override Material UI's styles. */}
    </StyledEngineProvider>
  );
}

但是我仍然不明白为什么它在开发模式下可以工作，而在生产模式下却不能。