时间戳

首页 > 解决方案 > 带有样式化组件的 Redux 表单

javascript - 带有样式化组件的 Redux 表单

问题描述

我正在尝试创建一个可重用的组件，其中我<Field />返回了 redux-form，并且在这个组件中，我使用 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;

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

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

标签： javascriptreactjstypescriptredux-formstyled-components

解决方案

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

您实际上在这里将其传递了两次，因为最终className应该是在componentType而不是Field本身上。

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

推荐阅读