Javascript 使用@artsy/fresnel框架的条件语句

我正在使用npm包构建一个响应迅速的React应用程序

这是我的密码

<Media greaterThanOrEqual='computer'>
    <div style={{ padding: '20px 50px' }}>
           Some Content Goes Here                               
    </div>
</Media>

<Media lessThan='computer'>
    <div style={{ padding: '50px 100px' }}>
           Exact Same Content Goes Here                               
    </div>
</Media>

这里有一些内容
这里有完全相同的内容

我已经搜索了文档，但找不到根据呈现的媒体标记设置div填充的方法。我想实现这样的目标

<div style={{ padding: (MediaIsGreaterThanComputer ? '20px 50px' : '50px 100px') }}>
    Some Content Goes Here
</div>

这里有一些内容

---

这在@artsy/fresnel框架中可行吗？

您可以这样做，但是您需要控制

媒体
组件发出的包装器div（请参阅）。比如：

<Media greaterThanOrEqual='computer'>
  {(mediaClassNames, renderChildren) => {
    return (
      <div style={{ padding: '20px 50px' }}>
        {renderChildren ? "Some Content Goes Here" : null}
      </div>
    )
  }}
</Media>


{（mediaClassNames，renderChildren）=>{
返回(
{renderChildren？“此处有一些内容”：null}
)
}}