Can't use custom props with Styled components in Typescript

Here’s my very simple component:

import React, { ReactChild, ElementType } from 'react'
import styled from '@emotion/styled'

type WrapperPropsType = {
  size?: SizeType
}

type ButtonPropsType = {
  as?: ElementType<any>,
  size?: SizeType,
  children?: ReactChild
}

const Wrapper = styled.button<WrapperPropsType>((props: WrapperPropsType) => ({
  fontSize: FontSize[props.size],
}))

const Button = ({ as, size, children }: ButtonPropsType) => {
  return (
    <Wrapper as={as} size={size}>
        { children }
    </Wrapper>
  )
}

My .tsconfig:

{
  "compilerOptions": {
    "types": ["node", "@emotion/react"],
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "src/**/*.test.tsx"
  ]
}

But on compile I’m getting next error:

Error: src/components/Button/Button.tsx(18,30): semantic error TS2339: Property ‘size’ does not exist on type ‘{ theme?: Theme; as?: ElementType<any>; } & Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, “form” | … 265 more … | “onTransitionEndCapture”> & { …; }’.

What am I doing wrong? Thanks for any help

Packages versions: @emotion/react version: 11.1.2 @emotion/styled version: 11.0.0 typescript version: 4.1.3

[VladimirHumeniuk]

@Andarist repository: https://github.com/VladimirHumeniuk/samurai-ui , to get an error you have to run build script: npm i && npm run build

Would be amazing if you can take a look because I have checked all similar issues on SO and here, I have checked the documentation a million times and have already dropped my hands, have no idea what I’m doing wrong.

🙏

[Andarist]

Glad you have been able to fix this on your side 👍