This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-27
Channels
- # aleph (1)
- # beginners (48)
- # cider (34)
- # clojure (27)
- # clojure-dev (15)
- # clojure-uk (21)
- # clojurescript (27)
- # data-science (3)
- # datomic (10)
- # instaparse (30)
- # lumo (85)
- # off-topic (3)
- # perun (2)
- # portkey (24)
- # re-frame (13)
- # reagent (17)
- # ring (1)
- # shadow-cljs (77)
- # spacemacs (1)
- # test-check (3)
- # yada (4)
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"]]]
@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.
(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?AFAIK PropTypes.object.isRequired
tells React that “this prop is required” and React will give a warning if it’s not passed.
@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
)
Cool! reactify-component
was indeed what I was missing. I’ll try it out later today. Thanks @nenadalm
I don’t think so