微前端开发时,使用cssinjs编写的组件打包后样式丢失

场景

  1. 在使用拆分公司的巨石项目时,往微前端方案迁移时,遇到了之应用保活出现的样式失效的问题
  2. 我测试了styled-components@emotion/reactantd-style都时一个结果
  3. 最后在一个大佬的启发下,发现这些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>
  );
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值