JSS is designed for dynamically generated HTML rendered by JS. It’s purpose is to generate unique identifiers for class names to prevent collisions in naming.
If you want to have static CSS generated it’s easier to look at LESS\SASS\SCSS and build them with gulp, or with Less straight(http://lesscss.org/usage/).
Here’s heavily modified example which does what you might want.
https://codesandbox.io/s/core-jss-playground-84yve
All is done using jss-plugin-global
Compare it to initial code in how CSS rules are defined with @global to make them rendered without enhancing class names with dynamic parts.
Also look at https://cssinjs.org/jss-plugin-global docs and nested plugin docs https://cssinjs.org/jss-plugin-global as it’s useful.
And probably you’ll find it useful to use JSS-CLI https://cssinjs.org/cli/
So with JSS CLI you’ll be able to complile JSS into static CSS and serve it via wp_enqueue_style() as normal css file.
Or you can build your JS with JSS file from ES6 syntax with webpack+babel and then use wp_enqueue_script() and your built JS will compile inner JSS and inject into page just like in example.