Hydration error problem caused by using <style jsx> "background-image" property.

[Pudge1996]

• mdx-bundler version: 9.0.1
• node version: 18.12.0
• npm version:8.19.2

I added a component in mdx, which needs to be embedded with CSS. When I add background-image: ...; in <style jsx>, i got error:

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Code:

// some_compontents.js
<style jsx>{`
        .react-resizable-handle {
          position: absolute;
          width: 22px;
          height: 30px;
          background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyMiAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIuNSIgeT0iLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIyOSIgcng9IjMuNSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik04IDdhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00em0wIDUuOTk5YTIuMDAxIDIuMDAxIDAgMSAwIC4wMDEgNC4wMDJBMi4wMDEgMi4wMDEgMCAwIDAgOCAxM3ptMCA2YTIuMDAxIDIuMDAxIDAgMSAwIC4wMDEgNC4wMDJBMi4wMDEgMi4wMDEgMCAwIDAgOCAxOXptNi04YTIgMiAwIDAgMCAxLjQxNC0zLjQxNUEyIDIgMCAxIDAgMTQgMTAuOTk5em0wIDJhMi4wMDEgMi4wMDEgMCAxIDAgLjAwMSA0LjAwMkEyLjAwMSAyLjAwMSAwIDAgMCAxNCAxM3ptMCA2YTIuMDAxIDIuMDAxIDAgMSAwIC4wMDEgNC4wMDJBMi4wMDEgMi4wMDEgMCAwIDAgMTQgMTguOTk5eiIgZmlsbD0iI0JCQiIvPjxyZWN0IHg9Ii41IiB5PSIuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjI5IiByeD0iMy41IiBzdHJva2U9IiNEREQiLz48L3N2Zz4=");
        }
`}</style>

As long as I delete the background-image, everything is fine.

---

I tried many ways, but I couldn't solve it. Unless I add this style to global.css, it is not elegant.
I also tried to import CSS files through, but this error occurred:

ERROR: Cannot import "../xxx/style.css" into a JavaScript file without an output path configured

---

I tried to add this <style jsx> to other pages (such as the Index.js or other pages unrelated to MDX), and everything was fine. This looks like a problem when rendering MDX.