使用styled-components的Material UI组件部署后样式丢失，如何解决？

问题场景 #

使用Material UI Drawer结合styled-components自定义了Navbar和Drawer的背景色等样式，本地开发环境（localhost）显示正常，但部署到Surge、Vercel、Firebase、Netlify等任意托管服务后，组件的自定义样式完全丢失。

本地效果：

部署后效果：

核心解决方案 #

1. 配置服务端渲染（SSR）样式收集 #

如果项目是Next.js这类支持SSR/SSG的框架，必须正确配置styled-components的样式收集逻辑，否则部署后样式无法被正确注入页面。

在_document.js中添加如下配置：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

2. 提升自定义样式优先级 #

Material UI的内置样式优先级可能在部署后覆盖styled-components样式，可通过增强选择器特异性解决：

const StyledDrawer = styled(Drawer)`
  & .MuiDrawer-paper {
    background-color: #1e293b;
    color: #ffffff;
    width: 250px;
  }
`;

也可结合Material UI的主题系统确保样式生效：

const StyledDrawer = styled(Drawer)(({ theme }) => ({
  '& .MuiDrawer-paper': {
    backgroundColor: theme.palette.primary.dark,
    color: theme.palette.common.white,
    width: 250,
  },
}));

3. 确认构建流程正确性 #

• 检查package.json中的构建命令是否正确，例如Next.js静态导出：

"scripts": {
  "build": "next build && next export"
}

• 确保托管平台使用正确的构建命令执行编译，避免跳过styled-components的样式生成步骤。

4. 验证版本兼容性 #

确保styled-components版本与Material UI版本匹配（Material UI v5推荐搭配styled-components v5及以上版本），版本冲突可能导致样式注入失败。

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