带样式组件的Redux表单

如何解决带样式组件的Redux表单

我正在尝试创建一个可重用的组件，并在其中返回了redux-form <Field />，并在此组件中使用styled-component对其进行样式设置。

我面临的挑战是没有一种风格可以体现

这是我的simple-field-input.styles.ts

import React from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import { SimpleFieldProps } from './simple-field-input.type';

const ReduxFormField: React.FC<SimpleFieldProps> = ({ componentType }) => {
    return <Field component={componentType} name="email" />;
};
export const Container = styled(ReduxFormField)`
    outline: none;
    border: none;
    background-color: orangered;
    color: yellow;
`;

这是我的simple-field-input.component.tsx

import React from 'react';
import * as Style from '../simple-field-input/simple-field-input.styles';
import { SimpleFieldProps } from './simple-field-input.type';

const FieldInput: React.FC<SimpleFieldProps> = ({ componentType }) => {
    return <Style.Container componentType={componentType}></Style.Container>;
};

export default FieldInput;

它简单地呈现输入但不实现样式...

我将不胜感激。谢谢

解决方法

在不是DOM元素的组件上使用styled时，其作用是在组件中添加一个className道具。该组件需要访问该className并将其传递给DOM元素。

实际上，您在这里将其传递了两次，因为className应该以{{1​​}}而不是componentType本身结尾。

Field