WithStyles 在 React 的 Material UI 中不起作用答案

【问题标题】：WithStyles not working in Material UI for ReactWithStyles 在 React 的 Material UI 中不起作用
【发布时间】：2018-04-11 05:31:20
【问题描述】：

我有一个使用 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：无法读取未定义的属性“类”

【问题讨论】：

你的道具是怎么传的？
我看到你不需要 classes 道具，你为什么要通过它，或者如何？
this.state.open 是否包含 classes 属性？如果没有尝试向它添加一个空对象！
对不起，我错过了组件末尾的关键行：export default withStyles(styles)(CreateJob);这旨在将样式传递给道具，但会引发上述错误。我从这个例子中得到了方法：material-ui-next.com/demos/text-fields 但没有运气
我也遇到了同样的问题，有人找到解决办法了吗？

标签： reactjs material-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

抱歉，我的答案有点晚了，但我在寻找其他解决方案时发现了这个问题。

我假设你也导入了withStyles。

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

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

其次，一个真正的问题：<MuiThemeProvider> 应该放置在您的最高组件周围（通常是您在入口点文件中呈现的 <App> 组件），因此您可以根据自己的喜好自定义整个应用程序的默认主题;查看他们的示例here。我不确定，但这甚至可以解决您的问题，因为这应该会引发另一个错误，例如 issue。

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

【讨论】：

通常，人们喜欢导出无样式的组件来简化测试