带有样式组件的 Redux 表单

Question

我正在尝试创建一个可重用的组件，其中我返回了 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;

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

我将不胜感激任何帮助。 谢谢

Answer 1

当在不是 DOM 元素的组件上使用styled时，它所做的是向组件添加一个className属性。 组件需要访问该className并将其传递给 DOM 元素。

您实际上在这里传递了两次，因为className应该以componentType而不是Field本身结束。

const ReduxFormField: React.FC<SimpleFieldProps & {className?: string}> = (
{ componentType, className }
) => {
    return <Field component={componentType} props={{className}} name="email" />;
};