Реагирует материал-интерфейс со стилями на внешний файл не работает

Question

Я посмотрел на этот вопрос , но все же сумел заставить его работать.

Цель состоит в том, чтобы отделить стили от файла компонента, чтобы иметь более чистую настройку.

Работает нормально, если не задействовано theme.

Я попробовал несколько итераций, с или без переноса withStyles в файлы styles.js.

Конкретный пример ниже, конечно, выдаст ошибку

TypeError: "theme.spacing is not a function"

Итак, я создал файл для css следующим образом

styles.js

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

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

Затем в файле компонента:

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

Какую версию материала-интерфейса вы используете?

В 4.x версии theme.spacing - это функция:

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;
}

, но в 3.x, theme.spacing - этообъект:

export interface Spacing {
  unit: number;
}

Answer 2

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

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


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

и в styles.ts

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

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