javascript - 如何设置 React 组件的样式

Question

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

import styled from 'styled-components';

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

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

export default Input ;

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

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

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

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

如果我用自定义样式的 Input 替换 Field，该表单将不再有效。

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

谢谢。

Answer 1

样式组件对于这种情况有特殊的功能。您的示例将如下所示:

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