Question

我看了一个this 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

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

Answer 2

您使用的是哪个Material-ui版本？

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

在外部文件上反应material-ui withStyles不起作用

2 个答案: