react-with-styles icon indicating copy to clipboard operation
react-with-styles copied to clipboard

Exporting multiple objects while using withStyles

Open maharshi-roy opened this issue 7 years ago • 2 comments

Is it necessary that the component to which withStyles has been applied be exported as default? If not, how can I export multiple components after applying withStyles on each of them? i.e. I'm trying to do something like -

class comp1 extends React.Component{....} 
withStyles(styles1)(comp1)
class comp2 extends React.Component{....}
    withStyles(styles2)(comp2)
    module.exports = {
         comp1 : comp1,
         comp2: comp2
    };

But ,it's not working..

maharshi-roy avatar Mar 28 '18 14:03 maharshi-roy

Hey @Strategist-Roy! Thanks for reaching out. In the code you provided above, you’re only exporting the components that are not wrapped with withStyles. withStyles will return a new component, and that’s what you want to export. You want to do something more like:

class PureComp1 extends React.Component {}
class PureComp2 extends React.Component {}

const Comp1 = withStyles(styleFn1)(PureComp1);
const Comp2 = withStyles(styleFn2)(PureComp2);

export { Comp1, Comp2 };

This will work. Let me know how it goes!

noratarano avatar Mar 28 '18 18:03 noratarano

Brilliant. I was so focused on keeping my original class name that I never thought of aliasing it like that. Saved me an hour easy

MrStLouis avatar Dec 13 '18 08:12 MrStLouis