Search code examples
cssclojurescriptom

Styling Om components

The way to style and Om component is based on how React handles styling. It would be a horrible mess to duplicate common CSS rules all over the application so is there a way to define the styles in a function or similar?

(defn my-css [] {:border "1px solid #000"})

(defn my-component [state]
  (dom/div #js {:className "the-class-name"
                :style #js (my-css)}))

I've tried using defn and def but I can't find a way to avoid

Caused by: clojure.lang.ExceptionInfo: JavaScript literal must use map or vector notation

Solution

  • I use:

    (defn create-style [row]
  {:background-color (utils/get-background-color (:task_status row)) :color (utils/get-color (:task_status row))})

    But I am using it with "om-bootstrap".

    I have the #js sometimes before the :style map and sometimes after. I think it depends on what they library is expecting.