React+MUI项目中Emotion生成的SerializedStyles未注入DOM如何解决

问题原因 #

你当前使用的css方法来自@emotion/react时，仅在JSX的css prop中使用时会自动完成样式注入，单独调用仅会生成类名对应的序列化样式对象，不会主动将样式规则插入DOM样式表，所以会出现类名存在但无对应样式的问题。

解决方法 #

方案1：改用@emotion/css的css方法 #

这个包导出的css方法调用时会自动完成样式注入，直接返回调用结果即可，不需要单独取name属性：

// 首先修改导入来源
import { css } from '@emotion/css'

tbaleColumnDef.cellClassName = (cell: GridCellParams) => {
    const rowIdx = cell.row.rowIdx;
    const style = cellDecoration.cssStyles(rowIdx);
    // 直接返回css调用结果，就是可用的类名字符串，样式已自动注入
    return css(style);
}

方案2：手动注入序列化样式 #

如果不想额外引入@emotion/css，可以调用emotion的inject方法手动把生成的序列化样式注入到DOM：

import { css, inject } from '@emotion/css'

tbaleColumnDef.cellClassName = (cell: GridCellParams) => {
    const rowIdx = cell.row.rowIdx;
    const style = cellDecoration.cssStyles(rowIdx);
    const serializedStyles = css(style);
    // 手动触发样式注入
    inject(serializedStyles);
    return serializedStyles.name;
}

注意事项 #

• 建议加一层缓存对已生成过的样式类名做复用，避免表格滚动时频繁生成重复样式规则导致DOM样式表冗余，影响性能。
• 若项目使用SSR渲染，需确保手动注入的样式被emotion的SSR收集逻辑捕获，避免 hydration 不匹配问题。

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