Create-react-app CSR中使用Material UI配置无内联样式的CSP

云上老周

2026-8-3

解决Material UI/Emotion应用的CSP内联样式禁用问题

问题根源

你的React应用使用Material UI（依赖Emotion库），而Emotion默认会向DOM中注入内联<style>标签。你配置的CSP规则style-src 'self'会阻止这些内联样式，因为它们不属于可信的外部资源，从而触发违反CSP的错误。

解决方案1：提取Emotion样式到外部CSS文件（推荐）

这种方法将所有Emotion生成的样式提取到外部CSS文件中，完全避免内联样式，符合style-src 'self'的规则，且维护性更强。

步骤：

安装依赖

npm install @emotion/babel-plugin @emotion/css

配置Babel提取样式
在你的Babel配置文件（.babelrc或babel.config.js）中添加以下内容：
```
{
  "plugins": [
    ["@emotion/babel-plugin", { 
      "extract": true, 
      "outputDir": "./src/styles/emotion" 
    }]
  ]
}
```
该配置会在构建时将所有Emotion样式提取到src/styles/emotion目录下的CSS文件中。

导入提取的CSS文件
在根组件（如App.tsx）中导入所有提取的CSS文件：

// 若支持glob导入可直接使用，否则需逐个导入
import './styles/emotion/*.css';

配置Emotion缓存禁用内联注入
修改Emotion的缓存配置，禁止其注入内联样式：

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { Container, ThemeProvider } from "@mui/material";
import createCustomTheme, { ThemeType } from "./themes/images/theme-factory";

const theme = createCustomTheme(ThemeType.ESG);
const cache = createCache({
  key: 'mui-cache',
  prepend: true,
  insert: () => {} // 禁用内联样式注入
});

const App: React.FC = (): JSX.Element => {
  return (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <Root />
      </ThemeProvider>
    </CacheProvider>
  );
};