Correct types for a function that returns styles?

[cprussin]

Say I have the following:

import { FunctionComponent } from 'react';

const foo = theme => ({ color: theme.bar });

export const Foo: FunctionComponent = () => <div css={foo} />;

For completeness I want to fully type the foo function (actually in my use case the foo equivalent is an export from a separate module so I really, really should type it fully). I've tried the following:

const foo = (theme: Theme): Interpolation<Theme> => ({ color: theme.bar });

const foo: FunctionInterpolation<Theme> = theme => ({ color: theme.bar });

And a myriad of different other attempts that seem less promising. However, every attempt I make yields a typescript error pretty dang similar to the following:

error TS2322: Type 'FunctionInterpolation<Theme>' is not assignable to type '((string | number | boolean | ComponentSelector | Keyframes | SerializedStyles | ArrayInterpolation<undefined> | ObjectInterpolation<...> | ((theme: any) => Interpolation<...>)) & (string | ... 7 more ... | FunctionInterpolation<...>)) | null | undefined'.
  Type 'FunctionInterpolation<Theme>' is not assignable to type 'string & FunctionInterpolation<Theme>'.
    Type 'FunctionInterpolation<Theme>' is not assignable to type 'string'.

8 export const Foo: FunctionComponent = () => <div css={foo} />;

Note that when I leave foo to be inferred, there's no error. Can anyone help me figure out how to properly type foo here?

[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.