Combine ReactDom styles

1

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()}>
  {"hello"->React.string}
</Text>

Update

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])}>
  {"hello"->React.string}
</Text>
2

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])}>
  {"hello"->React.string}
</div>;

rescript code

1 Like
3

You can use React.Style.combine

4

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

2 Likes