Блог

Я пытаюсь создать повторно используемый компонент, в котором у меня есть <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;


  

он просто отображает входные данные, но не реализует стили…

я буду признателен за любую помощь. Спасибо

При использовании styled компонента on on, который не является элементом DOM, он добавляет className к компоненту prop. Компоненту необходимо получить к нему доступ className и передать его через элемент DOM.

На самом деле вы передаете его здесь дважды, поскольку className он должен заканчиваться на the componentType , а не на Field самом себе.

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