Warning: Prop `className` did not match. Server: "css-j5xrcq-Component" Client: "css-13v2oeb-HomeIcon"

[therealgilles]

Current behavior: I am using NextJS 14 (App router) with emotion with twin.macro and tailwindcss. I am getting this single SSR/CSR mismatch warning but I don't know how to address it.

app-index.js:35 Warning: Prop `className` did not match. Server: "css-j5xrcq-Component" Client: "css-13v2oeb-HomeIcon"

The HomeIcon component is a react-icon/fa component called FaHome (which is an SVG element) added as follows:

/** @jsxImportSource @emotion/react */
'use client'

import { FaHome } from 'react-icons/fa'
import from 'twin.macro'

const HomeIcon = () => <FaHome className="text-xl" />

To reproduce: Not sure.

Expected behavior: I am not expecting any SSR/CSR mismatch. I have tried this suggestion but it didn't make any difference in my case.

Looking for advice and wondering if this is a bug.

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.11.4
• twin.macro version: 3.4.1
• next version: 14.1.4 (using App router)

[therealgilles]

I tried to set autoLabel to never in the next.config file, as well as experimenting with labelFormat, but neither setting seems to take effect somehow.