Importing stateless functional components with styles in Reactjs

Question

When implementing this answer, I get the following error message.

Inbox.js:52 Error getting documents:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of WithStyles(Component).

Inbox.js calls MyView.js. And MyView.js imports <MyButtons/>

MyView.js

import MyRegularButton from './MyButtons';
import MyStyledButton from './MyButtons';

<MyButtons />

What am I doing wrong?

MyButtons.js

import React from 'react';
import { withStyles, } from '@material-ui/core';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const MyRegularButton = props => (<Button>Click me!</Button>);

const MyStyledButton = ({ classes, }) => (
  <Button className={classes.button}>Click me!</Button>
);

export default withStyles(styles, { withTheme: true })({ MyRegularButton, MyStyledButton })

Answer 1

From your Button.js file you can export both components like

import React from 'react';
import { withStyles, } from '@material-ui/core';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const MyRegularButton = props => (<Button>Click me!</Button>);

const MyStyledButton = ({ classes, }) => (
  <Button className={classes.button}>Click me!</Button>
);

const Regular = withStyles(styles, { withTheme: true })(MyRegularButton)
const StyledButton = withStyles(styles, { withTheme: true });(MyStyledButton);                                                       
export { Regular,StyledButton}

and then you can import it in different files like:

import { Regular } from './Button'

and

import { StyledButton } from './Button'