How to use theme object with typescript and @emotion/styled

At the moment doing something like below throws an error Property colors does not exist in Object

import styled from '@emotion/styled'

const Div = styled.div`
    background: ${({theme}) => theme.colors.brand}
`

I’ve tried many approaches and nothing works but I’ve seen in other issues the library supports Typescript. Is there anything I am missing or doing incorrectly?

Cheers and thank your such an amazing piece of work.

[ofhouse]

What hinders you from creating the types from the theme?

// theme.ts
import { extendTheme, withDefaultColorScheme } from '@chakra-ui/react';

const theme = extendTheme(
  {
    colors: {
      brand: {
        500: '#000000',
      },
    },
  },
  withDefaultColorScheme({ colorScheme: 'brand' })
);

type Theme = typeof theme;

export type { Theme };
export { theme };

// emotion.d.ts
import '@emotion/react';
import { Theme as CustomTheme } from './theme';

declare module '@emotion/react' {
  export interface Theme extends CustomTheme {}
}

Usage:

import styled from '@emotion/styled'

const Div = styled.div`
    background: ${({theme}) => theme.colors.brand}
`

[asterikx]

Hi, I want to add custom variants/styles and have a fully-typed theme. How can I use an extended chakra-ui theme with TypeScript? I can’t find a follow-up issue on this @segunadebayo.