WithStyles在Material UI中无法正常工作

Question

我有一个使用Material UI Beta的应用程序，在其中尝试按如下方式设置简单组件的样式：

import { MuiThemeProvider } from 'material-ui/styles';


const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: 200,
    marginRight: theme.spacing.unit,
    width: 200,
  },
  menu: {
    width: 200,
  },
});



export const CreateJob = (props) => {
  const { classes } = props;
  let confirmDelete = () => {
    const r = window.confirm("Confirm deletion of job");
    return r === true;
  };

  return (
    <MuiThemeProvider>
      <div>
        <form onSubmit={props.isEditting ? props.handleEdit : props.handleSubmit}  noValidate autoComplete="off">
          <h2>Update job details</h2>
          <TextField
            error={props.jobIdError !== ''}
            helperText={props.jobIdError || "Example: ES10"}
            autoFocus
            margin="dense"
            id="jobId"
            label="Job ID"
            name="jobid"
            fullWidth
            onChange={props.handleInputChange('jobId')}
            value={props.jobId} />
         </form>
       </div>
     </MultiThemeProvider>

然后，在我的父组件中使用它，如下所示：

<CreateJob open={this.state.open} />

但是，这会产生以下错误：

TypeError：无法读取未定义的属性“类”

Answer 1

您的代码中未定义this.state。 在示例中，状态定义为

    state = {
    name: 'Cat in the Hat',
    age: '',
    multiline: 'Controlled',
    currency: 'EUR',
  };

Answer 2

抱歉，我迟到了一个答案，但是我在寻找另一个解决方案时才发现此问题。

我假设您也导入了withStyles 。

首先，您无需同时导出简单组件和增强组件：

export const CreateJob = props => {...} // lose the 'export'
export default withStyles(styles)(CreateJob); // only export here

其次，一个真正的问题： <MuiThemeProvider>应该放在最高组件（通常是您在入口点文件中呈现的<App>组件）周围，因此您可以根据自己的喜好为整个应用定制默认主题； 在这里看到他们的例子。 我不知道，但是这甚至可能解决您的问题，因为这应该扔了另一个错误，如在此问题 。

我只是希望这对某人有帮助，但是如果没有完整的组件文件，我无法确定您的确切问题是什么。