升级styled-components至v5后预编译包首次渲染样式失效求助

优先修复组件代码中的语法错误 #

你的三个styled组件存在两处未闭合的大括号，开发环境可能对语法容错，但生产构建会严格解析，这是导致样式缺失的核心原因：

1. 默认导出的侧边栏组件：@media (max-width: 768px) 块内，&.mobileOpen 未闭合，需在&:hover结束后添加两个闭合括号（分别闭合&.mobileOpen和@media）
2. MobileNavBarOpen 组件：同样的@media (max-width: 768px) 块内，&.mobileOpen 缺少闭合大括号

修复后的完整代码：

import styled from 'styled-components';

export default styled.div`
  text-align: center;
  width: 46px;
  min-height: 100vh;
  flex-direction: column;
  background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
  overflow: hidden;
  white-space: nowrap;
  &:hover {
    width: 250px;
    text-align: left;
  }
  @media (max-width: 768px) {
    display: none;
    &.mobileOpen {
        display: flex;
        &:hover {
                width: 46px;
                text-align: left;
            }
        }
  }
`;

export const MobileNavBar = styled.div`
  @media (min-width: 769px) {
    display: none;
  }
  @media (max-width: 768px) {
    position: fixed;
    z-index: 10;
    text-align: center;
    width: 100vw;
    height: 60px;
    flex-direction: row;
    background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
    overflow: hidden;
    white-space: nowrap;
    justify-content: space-between;
  }
`;

export const MobileNavBarOpen = styled.div`
  position: fixed;
  top: 60px;
  text-align: center;
  width: 46px;
  height: 100vh;
  flex-direction: column;
  background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 100px;
  &:hover {
    width: 250px;
    text-align: left;
  }
  @media (max-width: 768px) {
    display: none;
    &.mobileOpen {
        display: flex;
        &:hover {
                width: 46px;
                text-align: left;
            }
        }
  }
`;

若修复语法后问题仍存在的排查点 #

• 确保安装并配置babel-plugin-styled-components：在package.json中添加babel配置，强制插件正确生成类名：

  {
    "babel": {
      "plugins": [
        ["babel-plugin-styled-components", { "ssr": false }]
      ]
    }
  }
  

• 清除构建缓存：执行rm -rf node_modules/.cache（Windows环境执行rd /s /q node_modules\.cache）后重新运行npm run build
• 避免外部手动修改组件类名：确保所有样式控制都通过styled-components实现，防止类名冲突

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