时间戳

首页 > 解决方案 > 情感 - 将样式对象传递给外部库

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

问题描述

我正在使用 reactjs-popup，其中一个道具是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;

标签： javascriptreactjsemotioncss-in-js

解决方案

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

这里可行的选择是使用className道具来设置内容的样式。正如文档所述：

这个类名将与组件元素合并：ex className='foo' 表示 foo-arrow 为箭头样式， foo-overlay 为样式覆盖， foo-content 为样式弹出内容

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

import { css } from "emotion";

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

注意：这&是由情感添加的随机类名。其次content是由库添加

推荐阅读