React material-ui withStyles on external file not working

Question

I took a look a this question , but still did manage to get this to work.

The intention is to separate the styles from the component file in order to have a cleaner setup.

It works fine when there is no theme involved.

I did try several iterations, with or without wrapping withStyles in the styles.js files.

The particular example below will of course throw error

TypeError: "theme.spacing is not a function"

So I have created a file for the css as follows

styles.js

 import { withStyles } from '@material-ui/core/styles';

export default theme => ({
...
 textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
 }
 ...
});

Then on the component file:

login.js

import styles from './styles';
...
render() {
   const { classes } = this.props;
}
...
export default withCookies(withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Login))));

Answer 1

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

import { Component } from './component';
import { Styles } from './styles';


export const StyledContainer = withStyles(
    CStyles,
)(Component);

and in styles.ts

import { createStyles, Theme } from '@material-ui/core/styles';

/**
 * Styles for Component
 */
export const Styles = (theme: Theme) =>
    createStyles({
        '.className': {
            fontSize: 10,
        },
    });

Answer 2

Which material-ui version are you using?

In 4.x version, theme.spacing is a function:

export interface Spacing {
  (): number;
  (value1: SpacingArgument): number;
  (value1: SpacingArgument, value2: SpacingArgument): string;
  (value1: SpacingArgument, value2: SpacingArgument, value3: SpacingArgument): string;
  (
    value1: SpacingArgument,
    value2: SpacingArgument,
    value3: SpacingArgument,
    value4: SpacingArgument,
  ): string;
}

but in 3.x , theme.spacing is a object:

export interface Spacing {
  unit: number;
}