首页 文章

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

提问于
浏览 次
0

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

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

查找代码如下：

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" />

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

reactjs material-ui

2 回答

  • 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);
    回复于
  • -1

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

相关问题