Typescript complains when the css prop is passed back into the css prop using array composition

I’m attempting to compose styles so that any css prop styles passed into my component are merged back into the inner styles (and take precedence)

The problem is that the TS compiler complains when i attempt to pipe the the received css prop back into the prop.

For example:

export type PProps = React.HTMLAttributes<HTMLParagraphElement>

export const P = (props: PProps) => (
    <p
        css={theme => [css`font-family: ${theme.font.secondary};`, props.css]} // <-- typescript complains
        {...props}
    />
)

Is this expected / or is there a better way to achieve this?

[sami616]

Sure! here you go: https://codesandbox.io/s/strange-wiles-ljk3s

[Andarist]

Could you prepare a runnable repro case so I could take a look?