Use css prop on custom React components -- TypeScript issue

[therealgilles]

I am using the css prop on custom React components. TypeScript complains that the component does not have a css prop type. But it works if I add a className prop to the component. I saw this code in @emotion/react/types/jsx-namespace.d.ts:

type WithConditionalCSSProp<P> = 'className' extends keyof P
  ? string extends P['className' & keyof P]
    ? { css?: Interpolation<Theme> }
    : {}
  : {}

Is there a way to use the css prop on a component without having to define a className prop?

For context, I am using twin.macro with Gatsby + emotion + jsx Runtime. I have the following in types/twin.d.ts:

import styledImport from '@emotion/styled'
import { css as cssImport, Theme } from '@emotion/react'
import type { Interpolation } from '@emotion/serialize'

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport
  const css: typeof cssImport
}

declare module 'react' {
  // The css and tw props
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: Interpolation<Theme>
    tw?: string
  }
  // The inline svg css and tw props
  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
    css?: Interpolation<Theme>
    tw?: string
  }
}

[therealgilles]

I guess I am asking what the best way is to add the css prop to a custom component. Should I add the className prop or the css prop directly? And do I need the declare module 'react' part above?