headless WordPress with react - styles in back and front-end Gutenberg

The workflow (or workaround?) I have in mind at the moment is this:

1. Develop blocks according to the official specification, which generates a front-end stylesheet for blocks as part of the normal flow
2. Pull that stylesheet in my React app*
3. In the React app, fetch the WP content via the REST API (but expose the Gutenberg blocks first, see https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074)
4. Re-create the Gutenberg blocks as React Components (maybe there' a package out there that does this well already?)
5. Use the Gutenberg block names as classNames in React (since these names are used as classes in Gutenberg in the first place)

So basically a block could be saved as something like:

<div class="wp-block-myblocks-foo">Foo</div>

And in the React side it would be similar to this:

export default function Foo({ fooContent }) => (  <div     className="wp-block-myblocks-foo"    dangerouslySetInnerHTML={{__html: fooContent}}>  </div>)

While the stylesheet would look like:

.wp-block-myblocks-foo {  color: tomato;}

* Perhaps that front-end stylesheet could be uploaded to a CDN in the process of being generated (or built) to further decouple from WP?

Maybe this solution is more suitable for a SSR app since you need to pull an external stylesheet.

Anyway, hope this can reach more people thinking about solutions to this arrangement!