Django+React+MaterialUI项目本地与服务器CSS渲染不一致问题

解决方案 #

• 排查CSS优先级与注入顺序冲突
  MUI的组件样式默认优先级低于全局引入的CSS文件，若生产环境全局CSS（如Django模板引入的重置样式、公共样式）的引入顺序与开发环境不一致，就会覆盖MUI默认样式。你可以在Chrome开发者工具的「元素」面板选中异常元素，对比开发/生产环境的生效样式列表，确认是否有额外的全局规则覆盖了MUI样式。
  解决方法：将MUI样式注入优先级调整为最高，MUI v5版本可按如下配置：

import { StylesProvider } from '@mui/styles';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StylesProvider injectFirst>
    <ThemeProvider theme={createTheme()}>
      <App />
    </ThemeProvider>
  </StylesProvider>
);

• 排查打包环节样式丢失问题
  create-react-app生产打包时的CSS压缩、tree-shaking机制可能会误删部分动态生成的MUI样式，你可以先临时修改build命令禁用CSS压缩验证问题：

// package.json
"scripts": {
  "build": "CSS_MINIMIZER=false react-scripts build"
}

若禁用压缩后样式正常，可通过给MUI样式加全局前缀、在主题中覆盖全局样式规则的方式修复，比如统一h3字号、解决按钮宽度异常问题：

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        h3: {
          fontSize: '1.5rem',
        },
        '*': {
          boxSizing: 'border-box',
        }
      }
    }
  }
});

同时执行npm ls @mui/material检查是否存在多版本MUI依赖，多版本共存会导致样式规则冲突。

• 排查根元素font-size配置差异
  MUI默认使用rem单位计算尺寸，若生产环境html根元素的font-size和开发环境不一致，会直接导致h3字号变大、输入框标签偏移等问题。分别在开发/生产环境控制台执行以下命令验证：

console.log(window.getComputedStyle(document.documentElement).fontSize)

若返回值不同，检查生产环境是否有额外代码修改了根字体大小，补充全局font-size规则即可。

• 对齐两端meta标签配置
  直接将开发环境的所有meta标签、manifest.json引用原样复制到Django模板中，manifest.json只需要从React打包后的build目录拷贝到Django静态资源目录，补充对应引用即可，无需额外代码适配。

内容的提问来源于stack exchange，提问作者sin tribu