javascript - Emotion - スタイル オブジェクトを外部ライブラリに渡す

Question

私はreactjs-popupを使用してcontentStyleいますが、その小道具の1つは、 css-in-js オブジェクトを渡してライブラリ内の内部divのスタイルを設定できるようにするものです。

ただし、@media を含む css オブジェクトを渡すと、ライブラリはそれを処理しません。

@media クエリを必要に応じて処理できるように、このオブジェクトを「変換」するように感情に指示する方法があるかどうか、または何らかの方法でライブラリ要素をラップする方法があるかどうか疑問に思います。

これは実証するコードです:

/** @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;