Skip to content

Instantly share code, notes, and snippets.

@mhuebert
mhuebert / Readme.md
Last active March 1, 2024 16:55
material-ui's CSS-in-JS with Reagent. (see https://material-ui.com/customization/css-in-js/)

material-ui allows for customizing CSS via a higher-order component called withStyles. Like many higher-order components which expect render props, the purpose of withStyles is to accept some parameters, and then introduce a new variable into the scope of the component tree.

One succinct and simple way to translate the concept of scope into Clojure is via a custom let macro. Usage of such a macro is demonstrated here:

(:require [material-ui.styles :as m])

(m/let [{:keys [leftPad]} {:leftPad 
                           {:paddingLeft 8}}]
 ;; `leftPad` is now the _className_ associated with {:paddingLeft 8}