Type errors in custom Tabs example

🐛 Bug report

The docs for creating custom Tab components have type errors. Specifically, themeKey is not a key in StyledOptions.

Argument of type '{ themeKey: string; }' is not assignable to parameter of type 'StyledOptions'.
  Object literal may only specify known properties, and 'themeKey' does not exist in type 'StyledOptions'.

💥 Steps to reproduce

Copy the custom Tabs example into a TS project and observe TS error.

💻 Link to reproduction

https://codesandbox.io/s/custom-tabs-bug-erqe1?file=/src/CustomTabs.tsx

🧐 Expected behavior

No type errors.

🧭 Possible Solution

• Fix type definition of StyledOptions.
• Update docs example if required.

[pbassham]

I just ran into this trying to start with the example in the docs. Here is what I got working after converting the example to use the useStyleConfig hook:

const CustomTab = (props) => {
    // 2. Reuse the `useTab` hook
    const tabProps = useTab(props)
    const isSelected = !!tabProps['aria-selected']

    // 3. Hook into the Tabs `size`, `variant`, props
    const styles = useStyleConfig("Tab")

    return (
      <Flex  sx={styles} {...tabProps}>
        <Box as='span' mr='2'>
          {isSelected ? '😎' : '😐'}
        </Box>
        {tabProps.children}
      </Flex>
    )
  }

[luisgithub]

Same problem here, trying to implement chakra factory for a tab button: const StyledTab = chakra(“button”, { themeKey: “Tabs.Tab” })

Object literal may only specify known properties, and ‘themeKey’ does not exist in type ‘StyledOptions’.ts(2345)

any suggestions?