Within a React component using Emotion, we have a component called OtherComponent:
OtherComponent:
...
return <div css={otherComponentStyles}>
<div className='something'>
</div>
</div>
There is also another component named MainComponent that utilizes OtherComponent:
MainComponent:
...
return <OtherComponent css={mainComponentStyles} ... />
In this scenario, OtherComponent correctly applies otherComponentStyles but does not consider mainComponentStyles.
I would like to be able to apply styles to OtherComponent from the parent level of MainComponent. While I am aware that I can wrap OtherComponent in a div and set css=... on the div, it feels like a makeshift solution to the problem.
Therefore, my question is: How can CSS with Emotion be applied from the parent component, specifically MainComponent?