Type inner component

[tavoyne]

export interface TestProps {
  Icon: (props: { className: string }) => JSX.Element;
  children?: string;
}

export default function Test({ Icon, children }: TestProps) {
  return (
    <div>
      <Icon css={{ width: "2rem" }} />
      {children}
    </div>
  );
}

Gives me the following error (on Icon):

Property 'className' is missing in type '{ css: { width: string; }; }' but required in type '{ className: string; }'. ts(2741)

Anybody knows what's the correct way to type this?

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[tavoyne]

It's not a bug. I'm just asking the community for help, not trying to bother you.

[Andarist]

Ye, no worries. But even if it's not a bug it's usually easier for maintainers to get to your question if runnable repro is provided. That is because it's easy to play around with it, tweak it and try things out if needed.

[srmagura]

You just need to set className to optional in the definition of the Icon prop. So className?: string.

[tavoyne]

Thanks. Yes indeed.

But since the css prop is always set, the className will never be undefined, so it shouldn't be necessary, don't you think?

[Andarist]

There might be room for improvement in this type:

emotion/packages/react/types/jsx-namespace.d.ts

Lines 5 to 9 in 2d3d7dd

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

I'm slightly worried that this could lead to some perf problems but I'm not sure - the whole thing is somewhat magical. If I understand correctly this would require using Omit on the input P, like here. The other problem is also that we shouldn't limit you from using className and I'm not sure if that's possible to achieve. With a required className the ideal result would be to require either className or css and also accept both at the same time.