MUI 中手动引入全局样式@emotion/react 与 rsbuild 的样式注入机制不兼容的解决方案 MUI 使用

`@emotion/react` 与 `rsbuild` 的样式注入机制不兼容的解决方案

MUI 使用 @emotion/react 来处理样式，但如果 rsbuild 没有正确处理样式的动态注入，可能会导致一些样式问题。为了解决这个问题，你可以手动引入全局样式，确保这些基础样式被正确注入。

案例：手动引入全局样式

// 在你的 React 项目的入口文件（如 App.js 或 index.js）中手动引入 MUI 的全局样式

import React from 'react';
import ReactDOM from 'react-dom';
import { CssBaseline, GlobalStyles } from '@mui/material';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    {/* 确保全局样式被注入 */}
    <CssBaseline />
    <GlobalStyles styles={{ body: { margin: 0, padding: 0, boxSizing: 'border-box' } }} />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

在这个案例中，我们通过 GlobalStyles 手动注入了一些全局样式。CssBaseline 是 MUI 自带的样式重置工具，它可以帮助你清除浏览器的默认样式，GlobalStyles 则允许你在全局范围内注入自定义样式，确保样式能正常应用于所有 MUI 组件。

你可以根据项目需要，调整 GlobalStyles 中的样式定义。通过这种方式，即使 rsbuild 对 @emotion/react 的动态注入支持不足，你也可以确保基础样式不会丢失。