Agfdhyk

When creating custom styling with Material UI + redux-form, the Field element from redux-form does not apply the custom class names. When simply using FieldText from Material UI does. I have commented out the non-functioning line of code below.

The custom styles object is being applied the the react component via a prop named 'classes' that is defined on the prototype.

import React, {Component} from 'react';

import classNames from 'classnames';

import PropTypes from 'prop-types';

import { withStyles } from '@material-ui/core/styles';

import TextField from '@material-ui/core/TextField';

import { Field, reduxForm } from 'redux-form';

import { connect } from 'react-redux';

import {createOrder} from '../actions';



const styles = theme => ({

  root: {

    display: 'flex',

    flexWrap: 'wrap',

    justifyContent: 'center'

  },

  margin: {

    margin: theme.spacing.unit,

  },

  textField: {

    flexBasis: 400,

  },

  button: {

    margin: theme.spacing.unit,

  },

  input: {

    display: 'none',

  },

});





class Order extends Component {



  renderField(field) {

    return (

      <div>

        <TextField

          id="outlined-simple-start-adornment"

          // className={classNames(classes.margin, classes.textField)}

          variant="outlined"

          label="Age"



          {...field.input}

        />



      </div>

    )

  }



  render() {

    const { classes } = this.props;

    return (

      <form >

        <div className={classes.root}>

          <Field

            name="age"

            label="age"

            component={this.renderField}

          />

          <TextField

            id="outlined-simple-start-adornment"

            className={classNames(classes.margin, classes.textField)}

            variant="outlined"

            label="Company Name"

          />

        </div>

      </form>

    );

  }

}



Order.propTypes = {

  classes: PropTypes.object.isRequired,

};







export default reduxForm({

  form: 'Form'

})(

  connect(null, {createOrder})(withStyles(styles)(Order))

);

Because classes is undefined, you can access classes from props.

like this.

className={classNames(this.props.classes.margin, this.props.classes.textField)}

TextField should be like this.

<TextField

      id="outlined-simple-start-adornment"

      className={classNames(this.props.classes.margin, this.props.classes.textField)}

      variant="outlined"

      label="Age"

      {...field.input}

    />

I think you have defined const { classes } = this.props; in render() but it is not accesible inside renderField(field){...} due to its scope.

You can not destructure props for whole component.
Destructuring can only assign local variables so you'd need to destructure props in each function. Otherwise there's nothing wrong with having to write this.props.value.

So here you have two alternatives

1] pass props to renderField() or again destructure const { classes } = this.props inside renderField()

2] Directly use this.props.classes instead of just classes in renderField()