Fork me on GitHub
#reagent
<
2018-05-27
>
kwladyka09:05:14

const styles = {
  root: {
    flexGrow: 1,
  },
};

function SimpleAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

SimpleAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleAppBar);
https://material-ui.com/demos/app-bar/ How to run this code in reagent with hiccup? I am asking about withStyles and classes: PropTypes.object.isRequired which I am not sure what does.
[:> AppBar
      {:position "static"
       :color "default"}
      [:> Toolbar
       [:> Typography
        {:variant "title"
         :color "inherit"}
        "Title"]]]

kwladyka10:05:20

hmm or maybe it is done only for examples purpose on material-ui

valtteri12:05:29

@kwladyka withStyles is a function which returns given component wrapped into a higher-order component which contains the styles. I spent a few hours trying to figure out how to use it like in the JS-examples but didn’t find a nice and clean way to apply it with Reagent. As a conclusion I don’t use withStyles at all. I use MuiThemeProvider and prop based style overrides when needed.

kwladyka18:05:45

so as I understand you inject CSS as theme instead to UI elements

kwladyka21:05:30

(def theme (mui/create-mui-theme
             (clj->js
               {:palette {:secondary {:main "#123456"}}
                :overrides {:MuiButton {:root {:color "green"
                                               :text-transform "none"}}}})))
Any way to do it better?

kwladyka21:05:08

Is everything with prefix Mui (MuiButton)? How to know that?

kwladyka21:05:49

hmm maybe I should keep it as js file instead of cljs

valtteri12:05:17

But if you figure out how to use it, please let me know. 🙂

valtteri12:05:14

AFAIK PropTypes.object.isRequired tells React that “this prop is required” and React will give a warning if it’s not passed.

valtteri12:05:22

I’ve been happily ignoring such declarations in the examples.

nenadalm13:05:01

@kwladyka, @valtteri here is houw to use HOC (higher order components): https://stackoverflow.com/questions/45909731/react-hoc-wrapping-with-clojurescript-and-reagent. (Since HOC works with react components, you need to convert it with reactify-component first and then back to reagent component with adapt-react-class)

valtteri14:05:03

Cool! reactify-component was indeed what I was missing. I’ll try it out later today. Thanks @nenadalm

lilactown14:05:36

is it possible to update a ratom and not trigger a re-render?

nenadalm18:05:01

Why not to use just cljs.core/atom then?

lilactown01:05:56

that’s a really good point 😄

pesterhazy16:05:41

I don’t think so