为何同浏览器下同套Material-UI代码本地和远程部署显示效果不一致

可能的原因 #

1. CSS优先级生产环境异常
   本地开发环境的MUI样式注入顺序和生产构建后不同，你自定义的styled组件样式权重低于MUI默认样式，导致规则被覆盖。尤其你同时混用了函数式styled写法和字符串模板styled写法，不同构建环境下的类名hash生成规则不同，很容易出现优先级错乱。
2. 样式代码存在语法错误
   你提供的代码里有明显的语法问题：&.MuiTableCell-head:last-child th'末尾多了多余的单引号，开发环境CSS解析器会做容错忽略这条规则的错误部分，生产构建压缩CSS时会直接判定这条规则无效，直接丢弃整条相关样式，导致表头样式完全不生效。而且你本身选择的元素就是TableCell（对应th元素），后面再加th选择器也永远匹配不到目标元素。
3. rem基准值不一致
   你用了0.75rem作为字体大小，如果全局的html根字体配置在生产环境没有正确打包，本地和远程的根字体默认值不同，就会出现字体大小整体缩放的差异。
4. 字体加载失败
   你指定了font-family: Roboto，如果远程环境没有正确引入Roboto字体资源，浏览器会自动降级到系统默认字体，不同字体的行高、字符宽度差异也会导致显示错位。
5. 生产构建优化误删样式
   如果你使用的是旧版本MUI（比如v4搭配@mui/styles），生产构建时的Tree Shaking或者CSS压缩插件可能会把不标准的自定义样式识别为无用代码直接删除。

排查步骤 #

• 先修复代码语法错误：把&.MuiTableCell-head:last-child th'修改为&.MuiTableCell-head:last-child，删除多余的单引号和多余的th选择器。
• 打开浏览器开发者工具的「元素」面板，对比本地和远程环境下TableCell元素的生效样式：如果你写的font-size: 0.75rem、text-align: center规则被划掉，就说明是优先级不足被覆盖，可以临时加!important验证，确认是优先级问题后，用MUI的StyledEngineProvider调整样式注入顺序提高自定义样式的优先级即可。
• 在控制台分别执行window.getComputedStyle(document.documentElement).fontSize，对比本地和远程的根字体大小是否一致，如果不一致就检查全局样式的打包配置。
• 查看开发者工具「网络」面板的字体请求，确认远程环境下Roboto字体是否加载成功，如果加载失败就补全字体引入配置。
• 本地执行yarn build后用静态服务（比如serve命令）直接访问构建后的产物，如果能复现问题就说明是构建流程的问题，和远程服务器配置无关，可以直接本地调整构建配置排查。

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