Combine ReactDom styles

Is there a way to have an utility approach using ReactDom.Style?

I would like to be able to compose css properties similar to how TailwindCss does it in css classes.
But in this case I have to use ReactDom.Style because it I’m using ReactPdf

So I imagine something with curry like this, but this doesn’t work:

let textXs = ReactDom.Style.make(~fontSize="10px")
let colorBlue500 = ReactDom.Style.make(~color="#11aaff")

<Text style={textXs->colorBlue500()}>


Attempt #2 (works)

This works but I wonder if there is a drawback with it. Is there a cleaner, less verbose solution?

let twFlex = ReactDOM.Style.make(~flexDirection="row", ())
let twColorPrimary = ReactDOM.Style.make(~color=primaryColor, ())
let twBgGreen = ReactDOM.Style.make(~backgroundColor="green", ())
let css = styles => {
   styles->Array.reduce(ReactDOM.Style.make(), (a, b) => {
      ReactDOM.Style.combine(a, b)

<Text style={css([twColorPrimary, twFlex, twBgGreen])}>

Another possibility, but it implies to add a dependency to bs-css and bs-css-dom:

open CssJs;
let twFlex = flexDirection(#row);
let twColorPrimary = color(#hex("FFF"));
let twBgGreen = backgroundColor(green);

<div style={style(. [twFlex, twColorPrimary, twBgGreen])}>

rescript code

1 Like

You can use React.Style.combine

Also, check out
Should be faster than reducing due to less allocations. Though it’s not possible w/ ReScript syntax (yet!)