Question

我有一个redux表单，看起来很糟糕。我想以某种方式设计它，但我的项目使用模块化css加载器。它看起来像：

import styled from 'styled-components';

const Input = styled.input`
  color: #41addd;

  &:hover {
    color: #6cc0e5;
  }
`;

export default Input ;

然后我必须将它导入到我想要使用输入元素的组件中。

但redux-form使用名为 Field 的内置组件。

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

      <Field 
        name="firstName"
        component="input"
        type="text"
        placeholder="First Name"
      />

如果我用自定义风格的Field替换Input，则表单不再有效。

我该如何处理？如何设置Field组件的样式？

谢谢。

Answer 1

styled-components具有特殊功能。你的例子就是这样：

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

const StyledField = styled(Field)`
  color: #41addd;

  &:hover {
    color: #6cc0e5;
  }
`;

<StyledField 
  name="firstName"
  component="input"
  type="text"
  placeholder="First Name"
/>

如何设置React组件的样式

1 个答案: