CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
connect2Coder
connect2Coder

Reputation: 1130

How can I export a react material-ui component with 2 styles object? (material-ui V1)

We are using material-ui v1 and to compose HOC we are using recompose utility. The problem is we have 2 styles object. One is defined inside the component and other is general style object (defined in another jsx style file which exports javascript style objects that is being used system-wide). Now we need to compose both styles object. Is there any way to do that? composing 2 style objects with withStyles does not work. Any help will be greatly appreciated.

Here is our code: 

import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';
import compose from 'recompose/compose';
import { generalStyle } from '../../modules/styles/styles';//external style object

//internal style object
const styleObj = theme => ({
  paper: {
    padding: 16,
    color: theme.palette.text.secondary,
  },
});

class myCompo extends React.Component {
//..compo code
}

//composing 2 style objects with withStyles does not work
export default compose(
  withStyles({ styleObj, generalStyle }),
  connect(mapStateToProps, mapDispatchToProps),
)(myCompo );

//here is how generalStyle is defined in styles.jsx file
const generalStyle = theme => ({
  floatR: {
    float: 'right',
  },
  floatL: {
    float: 'left',
  },
  parallelItmes: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing.unit,
    paddingLeft: theme.spacing.unit + 10,
  },
});

module.exports = {
  generalStyle,
};

Upvotes: 2

Views: 2034

Answers (1)

Jules Dupont
Jules Dupont

Reputation: 7577

Suppose you have generalyStyles defined something like this:

const generalStyles = theme => ({
  generalStylesButton: {
    backgroundColor: "#ff0000",
    margin: theme.spacing.unit,
  },
});

Then, you can merge generalStyles into your internalStyles by executing the function (I think this is what you're missing based on your code snippet in the comments) and then spreading the resulting object:

const internalStyles = theme => ({
  internalStylesButton: {
    backgroundColor: "#00ff00",
    margin: theme.spacing.unit,
  },
  // Notice that since generalStyles is a function, not an object, you need
  // to execute it before you can merge
  ...generalStyles(theme)
});

Then the styling from both sets of styles will be available:

function FlatButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button className={classes.internalStylesButton}>
        Styled from internal
      </Button>
      <Button className={classes.generalStylesButton}>
        Styled from general
      </Button>
    </div>
  );
}

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

export default withStyles(internalStyles)(FlatButtons);

You can probably encapsulate this logic in an HOC to avoid duplicating the spread operator in each of your components. You probably also need to be careful about cases where generalStyles and internalStyles both have the same class names:

const general = theme => ({
  duplicateName: {
    backgroundColor: "#ff0000",
  },
});

const internal = theme => ({
  duplicateName: {
    backgroundColor: "#00ff00",
  },
  ...general(theme),
});

Having the spread operator reconcile duplicateName between these two styles might lead to tricky situations.

Upvotes: 2

Related Questions