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} ...])
Hey, is it possible with this code to pass
this.props.style
to a composition?Like it is here, when I wanted to place it in a separate component instead of placing it directly underneath the
GridList
For CLJS - here I want to move GridListTile to a separate place with props.styles from GridList that I can use.