Emotion: Unable to compose themed css in emotion10

[piotrblasiak]

• emotion version: 10.0.0-beta.8
• react version: 16.6.0

Relevant code.

const css1 = theme => ({background: "black"});
const css2 = {color: "white"};

return <div css={[css1, css2]}/>

What you did:

Tried to compose with one of the parts being a function/themed css.

What happened:

"Functions that are interpolated in css calls will be stringified..."

Is this by design or a bug? The workaround I found is to use the spread operator and call on the css function:

` <div css={theme => ({...css1(theme), ...css2})/>

But this forces me to know if css1 is a function or not.

[Loque-]

I think this is by design, as you are using object notation (styled), but trying to merge the two styles as if they were defined as strings (css).

I can see the documentation saying you can merge styles in an array here: https://next.emotion.sh/docs/composition (but it uses css, and the content of which is strings)

And here are the docs for object notation: https://next.emotion.sh/docs/object-styles (which are not strings, but objects), there is a note on composition there which might be helpful.

Your solution looks fine to me! Hope that helps! : )

[piotrblasiak]

It doesn´t say in the docs that it needs to be a string - and IMO it would make a lot of sense to be able to put a function or an object in there as well.

[defusioner]

Would be nice to have this feature. Actually the workaround is to make:
css={theme => [css.class1(theme), css.class2]}

[gordonmleigh]

@defusioner Composition order doesn't seem to work with this approach.

[Andarist]

@gordonmleigh what do you mean? Could you share repro case and actual/expected outcomes?

[gordonmleigh]

Turns out my problem was elsewhere, I was getting confused.

[Andarist]

This will be possible in upcoming v11, we’ve just merged in https://github.com/emotion-js/emotion/pull/1130 which Implements this