Search code examples
cssreactjsnext.jsemotion

How to apply CSS from parent component?

There is a React component using Emotion called OtherComponent:

OtherComponent:
...
return <div css={otherComponentStyles}>
     <div className='something'>
     </div>
</div>

And another component called MainComponent that uses OtherComponent:

MainComponent:
...
return <OtherComponent css={mainComponentStyles} ... />

What happens in this situation is that OtherComponent properly uses otherComponentStyles. But it ignores mainComponentStyles.

But what I would like to do is to apply style to OtherComponent from the level of MainComponent. I know i can wrap OtherComponent into a div, ad set css=... to the div. But it is a nasty fix of the problem.

Hence the question: how to apply CSS with Emotion from parent component aka MainComponent?

Solution

  • You are not applying those styles to any html tag, it's not <OtherComponent> which is rendering, it's the <div> which is rendering to the page, so you must apply styles to a valid html tag.