React+Ant Design 5.2.0自定义类名样式加载延迟原因咨询

这种样式闪烁的核心原因是自定义CSS的加载/生效时机晚于组件初始渲染，和内联样式的生效逻辑本质不同，具体可以拆成这几点：

• CSS加载顺序与优先级差异
  Ant Design的默认样式通常是项目初始化时就加载完成的（比如通过import 'antd/dist/antd.css'全局引入），而你的自定义CSS如果是局部引入、动态加载，或者打包后在样式文件中的顺序靠后，浏览器会先渲染组件并应用AntD的默认样式，等自定义CSS文件加载解析完成后才会覆盖原有样式，这中间的时间差就造成了闪烁。
  内联样式是直接附着在DOM元素上的，CSS优先级中内联样式高于外部类选择器，而且元素渲染时就带着这个样式，完全不需要等外部CSS文件加载，自然不会有延迟。

• React样式加载机制的影响
  如果你的项目用了CSS Modules、或者通过import()懒加载组件样式（比如配合React.lazy），组件首次渲染时，对应的自定义样式可能还没完成加载和注入到页面，这时候组件只会显示AntD的默认样式，等样式加载完成后才会应用自定义类的规则，出现闪烁。
  内联样式是作为JS对象存在的，组件初始化时就会被解析并应用到元素上，和组件渲染完全同步，不存在样式加载的延迟问题。

• 浏览器渲染流程的特性
  浏览器渲染页面的流程是：解析HTML生成DOM → 加载解析CSS生成CSSOM → 合并DOM和CSSOM生成渲染树 → 绘制页面。如果自定义CSS文件加载较慢，DOM会先完成解析并基于已有的AntD CSSOM渲染页面，等自定义CSSOM生成后，浏览器会重新计算渲染树并触发重绘，这就会导致视觉上的样式闪烁。
  内联样式属于DOM的一部分，在解析DOM时就会被纳入样式计算，初始渲染树就包含了内联样式的规则，不会有后续的样式更新带来的重绘闪烁。

出现闪烁的className写法： #

<Row justify={'space-between'} className="margin-top-4" />

无闪烁的内联样式写法： #

<Row
  justify={'space-between'}
  style={{ marginTop: '1rem' }}
/>

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