Rendering Component with custom styles with Material UI V1

Question

I am doing something fundamentally wrong leveraging Redux and Material UI V1, and I am looking for help. I have not been able to successfully style the width of my Card component at 75 pixels.

How are we suppose to pass custom styles to our components leveraging withStyles and connect? I have been following an example here in Material UI's docs on the Paper component but have not been able to style my UI successfully. Below are code snippets of my presentational and container component:

Container:

import compose from 'recompose/compose';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';

import Home from '../components/Home';
import * as homeActions from '../modules/home';

const styles = theme => ({
  root: theme.mixins.gutters({
    width: 75,
  }),
});

const mapStateToProps = (state, ownProps = {}) => {
  return {
    props: {
      classes: styles,
      welcomeMessage: state.home.message || ''
    }
  };
};

const mapDispatchToProps = (dispatch, ownProps = {}) => {
  dispatch(homeActions.loadPage());

  return {
  };
};

export default compose(
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps)
)(Home)

Presentational:

import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import Button from 'material-ui/Button';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import Typography from 'material-ui/Typography';

import photo from './party.png';

const Component = ({props}) => {
  return (
        <div>
      <Card classes={{
        root: props.classes.card
      }}>
        This is Paper
      </Card>
    </div>
  );
}

Component.propTypes = {
  props: PropTypes.object.isRequired
};

export default Component;

EDIT:

I have also leveraged this SO post to see how the Redux and Material UI API for styling have been combined.

Also, I did not explicit state this but according to Material UI, all Paper props are valid for Card props in case you were wondering why I cited Paper documentation.

I also replaced code snippets where previously there were directly links to my project.

score 1 · Accepted Answer · answered Dec 21 '17 at 17:19

1

I think it is acceptable for your presentational component to express its own style.

Export your presentational component using withStyles:

import Card from 'material-ui/Card';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
import React from 'react';

const styles = theme => ({
  root: theme.mixins.gutters({
    width: 75,
  }),
});

const Component = ({ classes }) => {
  return (
    <div>
      <Card className={classes.root}>This is Paper</Card>
    </div>
  );
};

Component.propTypes = {
  classes: PropTypes.shape({
    root: PropTypes.string,
  }).isRequired,
};

export default withStyles(styles)(Component);

Then, in your container, you simply connect the presentational component's default export:

export default connect(mapStateToProps, mapDispatchToProps)(Home)

answered Dec 21 '17 at 17:19

Ken Gregory

7,180
1
39
43

thank you for your answer. It lead me to the solution but it is not THE solution. I am going to provide my solution below. – robskrob Dec 21 '17 at 19:22
uh, how is it not the solution? You did exactly what I said to do. You're using withStyles in the presentational component and you're no longer using it in the container. – Ken Gregory Dec 21 '17 at 19:34
1

Hey Ken, I greatly appreciate your answer. It definitely lead me to the solution. I'm happy to mark your answer as the solution. For the record, I had to do a bit more than just use withStyles in the presentational component. I also wanted to use props from my container. I'll delete my answer seeing as that it has been down voted and probably redundant. – robskrob Dec 21 '17 at 19:47

Rendering Component with custom styles with Material UI V1

1 Answers1