How to use styled components with Field from redux form and custom component?

Question

I have something like this:

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')}
    />

and I've got an 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]

Props like label, title, or description came from SelectInput. How can I add type to StyledField, so I accepts the props that are aceped by SelectInput?

I've tried to add this:

styled(Field)

which are props from SelectInput but got this 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]

I've also tried:

styled<PropsWithChildren<SelectInputT>>(Field)

but got a similar error

EDIT:

Here is a Minimal Reproducible Example:

https://codesandbox.io/s/styled-field-redux-form-mtgu8y?file=/src/App.tsx

After creating minimal example, I've tried to experiment with PropsWithChildren<WrappedFieldProps> but with no effect:

styled<PropsWithChildren<WrappedFieldProps> & SelectInputT>(Field)

styled<PropsWithChildren<WrappedFieldProps & SelectInputT>>(Field)

Answer 1

The SelectInput component have to implement the WrappedFieldProps interface. You can simply implement this interface to the SelectInput component:

const SelectInput = ({ input }: WrappedFieldProps) => {
  return <p>{input.name}</p>;
};

If you'd like to add your own props to this component, you can simply extend this interface

interface SelectInputT extends WrappedFieldProps {
  yourExtraProp: any
}

https://codesandbox.io/s/styled-field-redux-form-forked-empqhz?file=/src/App.tsx