微前端开发时，使用cssinjs编写的组件打包后样式丢失_乾坤加载css in js 文件丢失问题-优快云博客

场景

在使用拆分公司的巨石项目时，往微前端方案迁移时，遇到了之应用保活出现的样式失效的问题
我测试了styled-components、@emotion/react、antd-style都时一个结果
最后在一个大佬的启发下，发现这些cssinjs在生产环境做的优化导致，关闭这个优化就好了

解决方案

styled-components


import { StyleSheetManager } from 'styled-components';
function App() {
  return (
    <StyleSheetManager disableCSSOMInjection={true}>
      {/* 你的应用代码 */}
    </StyleSheetManager>
  );
}

@emotion/react

额外安装@emotion/cache

pnpm add @emotion/cache


import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
const myCache = createCache({
  key: 'your-key', // 唯一 key 作为样式的前缀
  speedy: false, // 关闭快速插入方式
});
function App() {
  return (
    <CacheProvider value={myCache}>
      {/* 你的应用代码 */}
    </CacheProvider>
  );
}

antd-style


import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider autoInsertCSS={false}>
      {/* 你的应用代码 */}
    </ConfigProvider>
  );
}