Question

我有一个名为MyButtons.js的文件，我想从中导出两个无状态功能组件，其中一个包含一个style变量。但出现以下错误。

路径/到/MyButtons.js
SyntaxError：path / to / MyButtons.js：当前未启用对实验语法'exportDefaultFrom'的支持（64：8）：

64 |导出withStyles（styles）（{AllButtonsRow，UDButtons，}）;

我在做什么错了？

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 = props => (<Button className={classes.button}>Click me!</Button>);

export withStyles(styles)({ MyRegularButton, MyStyledButton, });

Answer 1

您忘记了default关键字：

export default withStyles(styles)({ MyRegularButton, MyStyledButton })

Answer 2

您需要在导出中包含default关键字。
要访问withStyles创建的类，您需要使用props.classes.button通过道具访问它们
您还需要确保withStyles将theme属性传递到样式函数中。 By default this is set to false。否则，您将无法访问诸如theme.spacing.unit之类的属性。

总而言之，您需要将最后一行更改为以下内容：

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

Answer 3

除了接受的答案外，还需要按如下所示将classes添加到输入props对象中。

const MyStyledButton = ({ classes, }) => (...

因此，整个文件的内容如下。（编辑：@MattC合并的答案）

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

如何在Reactjs中使用样式导出无状态功能组件

3 个答案: