Redux Form With Styled Component

Question

I am trying to create a reusable component where I have redux-form <Field /> returned and in this component I am styling it with styled-component.

the challenge I have is that none of the style is reflecting

this is my 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;
`;

and here is my 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;

it simple renders the input but not implementing the styles...

i will appreciate any help. thanks

Answer 1

When using styled on on component which is not a DOM element, what it does is add a className prop to the component. The component needs to access that className and pass it through to a DOM element.

You're actually passing it down twice here, since the className should end up on the componentType rather than the Field itself.

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