Emotion - pass style object to external library

Question

I am using reactjs-popup, and one of it's props is contentStyle, which allow you to pass css-in-js object to style an internal div in the library.

however when I pass css object with @media in it, the library doesn't deal with it.

I wonder if there is a way to tell emotion to "translate" this object, or somehow wrap the library element, so it can treat the @media query as needed.

this is a code to demonstrate:

/** @jsx jsx */
import { jsx } from '@emotion/core';
import ReactJsPopup from 'reactjs-popup';
import { FC, PropsWithChildren } from 'react';

const Modal: FC<{}> = props => {
    const style = {
        padding: 0,
        minHeight: '100%',
        '@media (min-width: 576px)': {
            minHeight: 'auto' // <----------- Doesn't work
        }
    }
    return (
        <ReactJsPopup contentStyle={style}>
            {(close): JSX.Element => (
                <div>
                    BODY
                </div>
            )}
        </ReactJsPopup>
    );
};

export default Modal;

Answer 1

Inline style objects currently do not support media queries.

The viable option here is to use the className prop to style the content. As the docs reads:

this class name will be merged with the component element: ex className='foo' means foo-arrow to style arrow, foo-overlay to style overlay and foo-content to style popup content

When using emotion, you can make sure that the selectors are unique using this property.

import { css } from "emotion";

<ReactJsPopup
  className={css`
    &-content {
       color: red;
    }
  `}
>
</ReactJsPopup>

Note: The & is for the random classname that is going to be added by emotion. Followed by content that is added by the library