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

Question

我正在使用 reactjs-popup，它的道具之一是 contentStyle，它允许您传递 css-in-js 对象来设置内部 div 的样式图书馆。

然而，当我传递带有@media 的css 对象时，库不处理它。

我想知道是否有办法向 "translate" 这个对象表达情感，或者以某种方式包装库元素，以便它可以根据需要处理 @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>

注：&为情感添加的随机类名。后面是库添加的content

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

Emotion - pass style object to external library

javascript

emotion

reactjs

css-in-js