子应用安装使用 [email protected]，基座加载子应用渲染后，部分 style 缺少添加样式隔离。

[Hingyu-Ho]

问题描述

基座应用加载子应用渲染后，子应用 antd 里的 <Button /> 组件渲染后缺失样式隔离。 基座、子应用都未使用 React-router，基座只负责 micro-app，子应用只渲染了 <Button />组件。

复现步骤

1.直接加载 2. 只渲染了 antd <Button /> 组件。

上传截图

基座应用渲染后

子应用渲染后

环境信息

• micro-app版本：1.0.0-rc2
• 主应用前端框架&版本：react17
• 子应用前端框架&版本：react17
• 构建工具&版本：cra(webpack)

/**
* @desc 基座运行在 13007
*/
//  index.tsx
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import App from './App';
import './global.scss';
import microApp from '@micro-zoe/micro-app';

microApp.start();
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);
reportWebVitals();

// App.tsx
export default function App() {
    return <micro-app name={'ef-device-user-base'} url={'//:localhost:3700'} iframe disable-memory-router ></micro-app>;
}

/**
* @desc 子应用运行在 3007
*/
// index.tsx
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import App from './App';
import './global.scss';
import microApp from '@micro-zoe/micro-app';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);
reportWebVitals();

// 子应用 App.tsx
export default function App() {
    return <Button type="primary">12312</Button>;
}

可能性猜想

antd 在渲染 Button 时是动态插入 style 的。我怀疑是监听动态插入样式这步的问题。

[bailicangdu]

应该是:where选择器问题，会在后续版本中修复

[Hingyu-Ho]

应该是:where选择器问题，会在后续版本中修复

多谢！🙏

想了解下后续版本的排期修复计划。

[peiziheng]

您好， 关于antdv 的:where选择器， 您什么时候修改css的优先级问题

[peiziheng]

应该是:where选择器问题，会在后续版本中修复

我从我的项目中碰到了，antdV4.0, 问题猜测：正确渲染的css上下顺序为： micro-app[name=dataProcess] .ant-btn-primary{ } :where(.css-dev-only-do-not-override-19yxfbp).ant-btn-primary{ }

样式有问题的渲染，上下顺序为： micro-app[name=dataProcess] :where(.css-dev-only-do-not-override-19yxfbp).ant-btn-primary{ } micro-app[name=dataProcess] .ant-btn-primary{ }

希望能给你提供思路

[katoto]

应该是:where选择器问题，会在后续版本中修复

修复了吗 哪个版本

[jiaozhiye]

这个问题修复了吗？现在有些新的项目切到antd5.x版本，都是:where选择器