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}
[my-component {:class leftPad} ...])
The let
macro is built on top of the with-styles
higher-order component, which is material-ui's withStyles component wrapped to handle conversion between JS and Clojure data structures, and allows returning plain Reagent components in the body function.
Two more features to demonstrate:
- material-ui components accept a
classes
key to override the injected styles for a component. - Instead of a plain map of className->styles, you can pass a function which will be passed the current material-ui theme.
(m/let [classes (fn [^js theme]
{:root {:color (.. theme -palette -primary -dark)}})]
[some-component {:classes classes} ...])
this is a bit outdated. The whole point of creating a HOC with
withStyles
is that it can be re-used.This is not the case here as
(react/createElement (hoc body-component))
is called.Using
styles
is probably better.