CODEWITHSUNDEEP
reactjsmaterial-ui
Hemadri Dasari
Hemadri Dasari

Reputation: 33994

Can't apply styles to Textfield using className in materi-ui latest version V1.0.0-beta.26

I am unable to style Textfield using className in latest material UI version. I am passing style object to className but it does no effect. Please find warning message below

Warning: Failed prop type: Invalid prop className of type object supplied to TextField, expected string.

Find code Below:

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

In docs https://material-ui-next.com/demos/text-fields/ it is actually an object passed to className. It is working there but dono why it is failing for me.

Upvotes: 1

Views: 2661

Answers (3)

Volobot Advanced Systems
Volobot Advanced Systems

Reputation: 2223

You need InputProps to apply className. For Eg:

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

Upvotes: 1

mut
mut

Reputation: 71

Material-ui team overhauled their approach to styling with material-ui v1. If you don't want to use inline style prop or plain css then you need to use 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);

Upvotes: 2

Carlo Cuevas
Carlo Cuevas

Reputation: 1

instead of className use style property instead

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

Upvotes: -1

Related Questions