Tengo algo como esto:
const StyledField = styled(Field)`
outline: 0;
width: 100%;
padding: 10px;
border: 1px solid #dbdbdb;
background-color: #fff;
line-height: 1.2;
border-radius: 3px;
option {
color: #666;
font-size: 14px;
}
`;
<StyledField
options={options}
additionalTooltipStyles={additionalTooltipStyles}
name="targetPhase"
component={SelectInput}
placeholder={getMessage('details.edit.innovation.status.change.phase')}
title={getMessage('details.edit.phase.change.innovation.form.tooltip.title')}
description={getMessage('details.edit.phase.change.innovation.form.tooltip')}
label={getMessage('details.edit.innovation.status.choose.phase.description')}
/>
y tengo un error:
Types of parameters 'props' and 'props' are incompatible.
Type 'PropsWithChildren<WrappedFieldProps>' is missing the following properties from type 'SelectInputT': description, label, options, title, and 3 more. [2322]
Elementos como label , title o description provienen de SelectInput. ¿Cómo puedo agregar tipo a StyledField, de modo que acepte los accesorios que son aprobados por SelectInput?
He intentado agregar esto:
estilo (campo)
que son accesorios de SelectInput pero obtuvieron este error:
Type 'SelectInputT' does not satisfy the constraint '"symbol" | "object" | "data" | "form" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 154 more ... | "view"'.
Type 'SelectInputT' is not assignable to type '"view"'. [2344]
También he intentado:
styled<PropsWithChildren<SelectInputT>>(Field)
pero obtuve un error similar
EDITAR:
Aquí hay un ejemplo mínimo reproducible:
https://codesandbox.io/s/styled-field-redux-form-mtgu8y?file=/src/App.tsx
Después de crear un ejemplo mínimo, intenté experimentar con PropsWithChildren<WrappedFieldProps> pero sin ningún efecto:
styled<PropsWithChildren<WrappedFieldProps> & SelectInputT>(Field)
styled<PropsWithChildren<WrappedFieldProps & SelectInputT>>(Field)
El componente SelectInput tiene que implementar la interfaz WrappedFieldProps .
Simplemente puede implementar esta interfaz en el componente SelectInput :
const SelectInput = ({ input }: WrappedFieldProps) => {
return <p>{input.name}</p>;
};
Si desea agregar sus propios accesorios a este componente, simplemente puede ampliar esta interfaz
interface SelectInputT extends WrappedFieldProps {
yourExtraProp: any
}
https://codesandbox.io/s/styled-field-redux-form-forked-empqhz?file=/src/App.tsx