如何将CSS应用于redux-form字段？

Question

我如何将任何类型的CSS应用于redux-form Field组件？className和class属性会被忽略：

        <div>
          <label>Name</label>
          <div>
            <Field
              className="form-input"
              name="formContactName"
              component="input"
              type="text"
              placeholder="Person to contact"
            />
          </div>
        </div>

我能够通过创建自定义组件来应用样式：

        <div>
          <label>Name</label>
          <div>
            <Field
              name="formContactName"
              component={ customInput }
            />
          </div>
        </div>

但这是一个很大的麻烦，并且在第一次使用redux-form时基本上抵消了它的好处。我有什么遗漏吗？请注意，我直接在自定义组件中添加了className赋值 - 我意识到我可以将它们作为props发送到Field中。

我尝试全局设置input样式，但它们也被忽略了。Redux-form网站文档告诉你如何使用该工具，但我没有看到任何关于CSS的提及...

谢谢,

JB

编辑：这不是重复的问题 - 指向的答案使用了自定义输入组件。如上所述，我可以通过从在线文档中获取代码来使其工作，但这样一来，一开始就没有必要使用redux-form。

@Jay：我能够通过从在线文档中获取代码来使用自定义组件使其工作：

class MyCustomInput extends Component {
  render() {
    const { input: { value, onChange } } = this.props
    return (
      <div>
        <label htmlFor="formContactName" className="col-sm-2 control-label">Name:</label>
        <div className="col-sm-10">
          <input
            id="formContactName"
            placeholder="Person to contact"
            className="form-control"
            type="text"
          />
        </div>
      </div>
    )
  }
}

然后，在redux-form的 Form 代码中：

    <div>
      <label>Name</label>
      <div>
        <Field
          name="formContactName"
          component={ MyCustomInput }
        />
      </div>
    </div>

使用 className 进行引导设置的方法很好。

- Omortis

---

可能是Redux Form中<Field>中的className问题的重复。 - Danziger

@Omortis，请澄清一下，你是如何进行样式设计的？你是给组件命名类并导入CSS文件，还是有一个全局的CSS文件？ - Javed

@Jay - 我正在使用grunt从src/less构建相关的Bootstrap css，并且有一个非常小的custom.css文件用于一些特殊情况。无论哪种方法都可以，但似乎我无法使任何应用于“Field”的CSS生效。 - Omortis

@Omortis，你在React Dev Tools中检查过类名是否应用于React组件了吗？如果已经应用，则问题可能出在你的CSS上。 - Javed

如果您声明样式并覆盖所需的样式会发生什么？？ <Form styles={{white-guys: dont-rap}} /> - weisk

Answer 1

所有自定义属性都将传递给输入组件，因此您可以这样做：

const CustomTextField = props => {
  const { input, label, type, meta: { touched, error }, ...other } = props

  return (
    <TextField
      label={label}
      type={type}
      error={!!(touched && error)}
      helperText={touched && error}
      { ...input }
      { ...other }
    />
  )
}

然后，您可以传递任何属性，包括className到CustomTextField

<Field
  name="some"
  component={CustomTextField}
  className="css-applied"
/>

- Dmitriy Kovalenko

---

这大致就是我所做的。我宁愿不创建自定义组件。难道没有办法为原始的redux-form输入控件添加样式吗？ - Omortis

我也想做同样的事情，但是找不到一种方法来为原始的redux表单输入添加样式。 - overloading