Question

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

警告：道具类型失败：提供给className的{{1}}类型的道具object无效，预期为TextField。

查找以下代码：

string

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

Answer 1

Material-ui团队使用material-ui v1彻底改变了他们的造型方法。如果您不想使用内联样式prop或普通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

您需要 InputProps 来应用 className。例如：

<TextField
           label={"Name"}
           name={"name"}
           variant={"outlined"}
           inputProps={
                         {className:chatClasses.textEdit}
              }/>

Answer 3

而不是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" />

在materi-ui最新版本V1.0.0-beta.26中，无法使用className将样式应用于Textfield

3 个答案: