javascript - React material-ui withStyles 对外部文件不起作用

Question

我看了一下 this question ，但仍然设法让它发挥作用。

目的是将样式与组件文件分开，以便进行更清晰的设置。

当没有 theme 涉及时，它工作正常。

我确实尝试了几次迭代，有或没有包装 withStylesstyles.js 文件。

下面的特定示例当然会抛出错误

类型错误:“theme.spacing 不是一个函数”

所以我为 css 创建了一个文件，如下所示

样式.js

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

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

然后在组件文件上:

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