airbnb / react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Exporting multiple objects while using withStyles

maharshi-roy opened this issue · 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..

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!

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