I created an input element with emotion react, and that input element has a custom property named pointer:
<InputField
placeholder={placeholder}
pointer={insidePool}
readOnly={insidePool}
type={type}
onChange={onChange}
/>
The InputField object:
const InputField = styled('input')(({ pointer }) => ({
all: 'unset',
width: 200,
display: 'inline-flex',
alignItems: 'center',
.....
}));
TS is complaining that pointer doesn't exist on the input element. I'm trying to add an interface for it like so:
export interface ExtendedInput
extends React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
> {
pointer: boolean;
}
And then assigning it to the InputField creation object:
const InputField: ExtendedInput = styled('input')(({ pointer }) => ({
Then TS complains that property pointer is missing in that styled object, and also complaining that the InputField in JSX:
JSX element type 'InputFIeld' does not have any construct or call signatures.
I know it's possible to solve this with ts-ignore, and such, but would really like to solve it with an interface is possible.
What am I doing wrong?