How to use SSR via react-dom/server with CSS Modules?

Question

css

I'm making SSR using React and CSS Modules.
You need to do this without third-party solutions (like Next.js), but with pure react-dom/server.
At the moment there is the following application:

import styles from "./MyModule.module.scss";
...
<div className={styles.colorRed}>Test</div>
...

Initially, the project is built using react-scripts build (there is support for CSS modules out of the box).
And then there is the server that does the renderToStaticMarkup.
However, the renderToStaticMarkup method from react-dom/server returns: The fact is that className becomes null during server rendering, and should be 'MyModule_colorRed__XXXX'. How to make renderToStaticMarkup work correctly with CSS modules?
<div>Test</div>

Answer 1

In general, I began to use Razzle . It is not practical to eject a configuration, or write an additional one for the sake of SSR.

Answer 2

You are doing something wrong:

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import styles from './MyModule.module.css';

const html = renderToStaticMarkup(<div className={styles.colorRed}>Test</div>);

console.log(html); // <div class="src_MyModule_module__colorRed">Test</div>