Create custom style Material UI with redux-form

Question

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))
);

score 2 · Answer 1 · edited Oct 05 '20 at 11:48

This is an old thread but I just ran into a similar issue and I would like to share how I resolved for people who will run into same issue with Material UI and Redux-form:

Pass down the classes as props

<Field
  component={this.renderInput}
  classes={classes}
/>

props contains classes available

renderInput(props) {
  console.log('console logging render input', props);
  return (
    <InputBase
      placeholder='Search…'
      inputProps={{ 'aria-label': 'search' }}
      classes={{
        root: props.classes.root, //call your className
      }}
    />
  );
}

Amruth · Answer 2 · 2018-11-22T09:15:12.033

0

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

edited Nov 22 '18 at 09:15

answered Nov 22 '18 at 09:03

Amruth

5,792
2
28
41

I was playing around with that as well -- but received a "TypeError: Cannot read property 'props' of undefined" when I define classes in the local scope. Could this need componentDidMount? Or is it something with redux-form? – angelica Nov 23 '18 at 02:27

score 0 · Answer 3 · answered Nov 22 '18 at 09:44

0

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()

answered Nov 22 '18 at 09:44

Pushpanjali

41
1
4

I was playing around with that as well -- but received a "TypeError: Cannot read property 'props' of undefined" when I define classes in the local scope. Could this need componentDidMount? Or is it something with redux-form? – angelica Nov 23 '18 at 02:27
Can you post your code so that I can see where you are getting an error – Pushpanjali Dec 03 '18 at 12:53

Create custom style Material UI with redux-form

3 Answers3