javascript - 情感 - 将样式对象传递到外部库

Question

我正在使用reactjs-popup，它的 Prop 之一是contentStyle，它允许您传递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;

Answer 1

内联样式对象当前不支持媒体查询。

这里可行的选择是使用 className 属性来设置内容的样式。作为docs内容如下:

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

使用情感时，您可以使用此属性确保选择器是唯一的。

import { css } from "emotion";

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

注意:& 是要通过情感添加的随机类名。后面是库添加的内容