search

dvingo / cljs-styled-components

ClojureScript wrapper for styled-components
MIT License
50 stars 4 forks source link

`:on-click` not working with styled button #17

Open rosenjcb opened 3 years ago

rosenjcb commented 3 years ago 

  :button
  {
    :color "white"
    :margin-left "1rem"
    :background-color "blue"
    :border-radius "4px"
    :border-style "none"
  })

[delete-button {:on-click (fn [] (println "hello"))} "Delete Me"]
;; Unknown event handler property `on-click`. It will be ignored.```

Am I doing something wrong? Also, how would I be able to override the attrs such as you can do in [styled-components](https://styled-components.com/docs/basics#overriding-attrs)
rosenjcb commented 3 years ago

The resolution around this is to change :on-click to :onClick and I have no idea why. I guess it's because I've escaped cljs-styled-components native :button and am now communicating directly with styled-components by passing props the verbatim keyword (e.g. :onClick becomes onClick in the React JSX). Is there a more technical explanation?

dvingo commented 2 years ago

Hi - sorry for the long silence on this. Yes there is no reagent-style prop conversion currently. That can be easily added - here is where props are handled: https://github.com/dvingo/cljs-styled-components/blob/8c254138a28a089b35e75abd90b1619f9138cfd7/src/main/cljs_styled_components/common.cljc#L153 and the reagent helper to convert them:

https://github.com/reagent-project/reagent/blob/b71fc361b85338ef4e4cd52a7b21e0f3f3f89628/src/reagent/impl/template.cljs#L63