如何解决Emotion + Facepaint-使用道具代替媒体查询
我在一个项目上使用情感,很想像这样使用随附的facepaint库:
const mq = facepaint([
this.layout === 'center',this.layout === 'left'
])
css(mq({
display: ['flex','grid'],flexDirection: 'column',justifyContent: 'center',alignItems: 'center',paddingLeft: constants.stylePaddingOuter,paddingRight: constants.stylePaddingOuter
}))
但是,这不会根据设置的属性更改CSS。因为我在facepaint文档上找不到任何相关信息,所以我想知道是否还有另一种方法可以完成上述任务?
谢谢!
解决方法
Du!
这很简单:
const pq = (valueCenter,valueSide) => {
return this.layout === 'center' ? valueCenter : this.layout === 'side' && valueSide
}
css({
display: pq('block','grid'),gridTemplateColumns: '1fr 1fr',visibility: 'visible','h1,p': {
textAlign: 'center'
},p: {
marginTop: 'var(--spx-space-xs)'
}
})
pq代表propquery;)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。