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

[sami616]

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?

[Andarist]

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

[sami616]

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

[tettoffensive]

This looks like what I'm trying to do. Did you get this to work? Mine not only seems to be complaining, but it doesn't actually apply the style from the parent. I see it's working in your codesandbox and my code looks exactly the same. Not sure what's going on.

UPDATE: It looks like if you don't pass the rest of the props with the spread operator, then it doesn't work. <dev css={[pCSS(), css]} {...props}>

[sami616]

Yes I believe the className prop needs to be passed down to the element

[zanona]

I had to tweak the PProps declaration by manually including css typings

import type {Interpolation} from '@emotion/core';
type PProps =
    React.HTMLAttributes<HTMLParagraphElement>
    & {css?: Interpolation}

[Andarist]

@sami616 this is expected. css prop is really supposed to be a "pseudo" prop - similar to key and ref. You never get those as part of your props, they are handled by React (or by Emotion in case of css). So what happens here is that you don't compile css prop away in your App.tsx and it gets passed through to P which in turn (if this is what you want, although I would encourage you to not do this) you should type manually as part of your props - similarly to what @zanona has done.

I believe this answers the question so I'm going to close this issue but if it doesn't then please comment back and I will try my best to clarify further.