带有样式化组件的 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" />;
};