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

【问题标题】：Emotion - pass style object to external library情感 - 将样式对象传递给外部库
【发布时间】：2020-04-03 23:18:02
【问题描述】：

我正在使用 reactjs-popup，它的一个 props 是 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;

【问题讨论】：

标签： javascript reactjs emotion css-in-js

【解决方案1】：

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

这里可行的选择是使用className 属性来设置内容的样式。正如docs 所说：

这个类名将与组件元素合并：ex className='foo' 表示 foo-arrow 用于设置箭头样式， foo-overlay 用于设置叠加样式， foo-content 用于设置弹出内容样式

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

import { css } from "emotion";

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

注意：& 是用于将由情感添加的随机类名。后面是库添加的content

【讨论】：