使用 redux-form 创建自定义样式的 Material UI答案

【问题标题】：Create custom style Material UI with redux-form使用 redux-form 创建自定义样式的 Material UI
【发布时间】：2019-04-24 21:19:01
【问题描述】：

使用 Material UI + redux-form 创建自定义样式时，redux-form 中的 Field 元素不会应用自定义类名。当简单地使用 Material UI 中的 FieldText 时。我已经注释掉了下面无效的代码行。

自定义样式对象正在通过原型上定义的名为“类”的道具应用到反应组件。

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

【问题讨论】：

标签： reactjs material-ui mobx-react-form

【解决方案1】：

这是一个旧线程，但我刚刚遇到了类似的问题，我想分享一下我是如何解决的，以帮助那些将在 Material UI 和 Redux-form 中遇到相同问题的人：

将类作为道具传递

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

props 包含可用的类

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

【讨论】：

【解决方案2】：

我认为您已在 render() 中定义了 const { classes } = this.props;，但由于其范围，它在 renderField(field){...} 中不可访问。

你不能解构整个组件的道具。解构只能分配 局部变量，因此您需要在每个函数中解构 props。不然写this.props.value.也没什么问题

所以这里有两种选择

1] 将 props 传递给 renderField() 或再次在 renderField() 内部解构 const { classes } = this.props

2] 在renderField() 中直接使用this.props.classes 而不是只使用classes

【讨论】：

我也在玩这个——但是当我在本地范围内定义类时收到“TypeError: Cannot read property 'props' of undefined”。这可能需要componentDidMount吗？或者是 redux-form 的东西？
你能把你的代码贴出来让我看看你哪里出错了

【解决方案3】：

因为classes是未定义的，所以可以通过props访问classes。

像这样。

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

TextField应该是这样的。

<TextField
      id="outlined-simple-start-adornment"
      className={classNames(this.props.classes.margin, this.props.classes.textField)}
      variant="outlined"
      label="Age"
      {...field.input}
    />

【讨论】：

我也在玩这个——但是当我在本地范围内定义类时收到“TypeError: Cannot read property 'props' of undefined”。这可能需要componentDidMount吗？或者是 redux-form 的东西？