无法使用material-ui最新版本V1.0.0-beta.26中的类名将样式应用于文本字段

Question

我无法在最新的材料UI版本中使用className设置Textfield的样式。我将样式对象传递给className但它没有效果。请在下面找到警告信息

警告：失败的道具类型：提供给className的object类型的无效道具TextField，预计string。

查找代码如下：

import TextField from 'material-ui/TextField';

const textField = {
  width: 200,
  fontFamily: 'Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif',
  fontStyle: 'normal',
  fontWeight: 400,
  fontSize: 16,
  color: '#504572',
}
<TextField className={textField} label="Email" placeholder="Enter your email" value={this.state.email} onChange={this.changeEmail} name="email" /> 

在文档https://material-ui-next.com/demos/text-fields/中，它实际上是传递给className的对象。它在那里工作，但不知道为什么它失败了。

Answer 1

Material-ui团队使用material-ui v1彻底改变了他们的造型方法。如果您不想使用内联样式prop或plain css，那么您需要使用withStyles HOC。

    import React from "react";
    import TextField from "material-ui-next/TextField";
    import { withStyles } from "material-ui-next/styles";

    const styles = {
      textField: {
        width: 200,
        fontFamily:
          "Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif",
        fontStyle: "normal",
        fontWeight: 400,
        fontSize: 16,
        color: "#504572"
      }
    };

    const stack = function(props) {
      const { classes } = props;
      return (
        <TextField
          className={classes.textField}
          label="Email"
          placeholder="Enter your email"
          name="email"
        />
      );
    };

    export default withStyles(styles)(stack);

Answer 2

而不是className使用style属性

import TextField from 'material-ui/TextField';

const textField = {
  width: 200,
  fontFamily: 'Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif',
  fontStyle: 'normal',
  fontWeight: 400,
  fontSize: 16,
  color: '#504572',
}
<TextField style={textField} label="Email" placeholder="Enter your email" value={this.state.email} onChange={this.changeEmail} name="email" />