I found that you can add styles like this:
<div style=(ReactDOMRe.Style.make(~color="red", ()))> ...
This is kind of ugly looking. What other options exist?
I found that you can add styles like this:
<div style=(ReactDOMRe.Style.make(~color="red", ()))> ...
This is kind of ugly looking. What other options exist?
The above API is inline style. I agree with you that it’s ugly.
Currently, the community is working on a css-in-js solution so I can say that no best practices yet.
You can see all avaiables css-in-js solution here https://redex.github.io/keyword/css
I personally use the good old css classes
I like https://github.com/SentiaAnalytics/bs-css or just plain old-fashioned CSS frameworks that you can drop in your index.html
. My favourite is Bulma.
I started with https://github.com/poeschko/bs-glamor, but now I’m more into https://github.com/SentiaAnalytics/bs-css
TBH I’ve tried to use some CSS-in-JS solutions when using ReasonReact, but every option I tried has been fairly underwhelming. I’ve started to just use Sass + classNames and it’s worked out pretty well, but I can’t see it scaling too well forever without something like CSS modules. I’d be interested in collaborating on a library for CSS-in-Reason
I’m using css-next w/ css modules (untyped). Works for me for now, tho it’d be cool to get them typed.
I’m using css modules typed but it kind of fragile. @ryyppy is working on a more solid solution I believe
I wished I had more time on my hand, but I am basically working on general tooling to have different ways to generate type definitions & external mapping for css module files.
Currently, the working part is a cli tool, which uses post-css (only with the css module transform), to parse a glob of css files inside a path and outputs a single .re file with all css module structures and bindings.
Example:
reason-css-modules src/**/*.scss.module --ext “scss.module” --target “src/styles.re”
There are quite some things which need to be implemented before I feel comfortable to release it:
Maybe I will upload my current progress some time, so ppl can at least use the CLI tool with some githooks (lint-staged etc).
Maybe, reason-css-modules-loader can be a solution. (Link here: https://github.com/sainthkh/reason-css-modules-loader)