How to integrate CSS-Framework and inline styles

[astridx]

I would like to use the css framework https://github.com/bonsaicss/bonsai.css together with Gatsby. I am currently looking at how to do this with a default starter.

So far I have managed to install the framework npm install bonsai.css and integrate it into my page import "../../node_modules/bonsai.css/dist/bonsai.css". I hope this is the right way in Gatsby?

Also I can use classes via <h1 className="primary"> and this works well.

But: I have to insert inline styles like this <div class="grid" style="--col:3">. Here is a link to an example page:
https://github.com/bonsaicss/bonsai.css/blob/4a3410a01b839960f35bd7d72437eeb5273465e4/index.html#L73

I tried it like this <div className="grid" style={{"--col:3"}}> but this failed to compile.

I have no idea, how I can realize this in Gatsby. I would be happy if someone could give me a hint.

I also opened a question for this topic here.

[astridx]

Sometimes you should ask a question after a pause. The solution just occurred to me while walking the dog. I forgot two quotation marks "--col " : " 3":

<div className="grid" style={{"--col":"3"}}>