Emotion + Facepaint-使用道具代替媒体查询

编程问答 2022-08-16

问题描述

我在一个项目上使用情感，很想像这样使用随附的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;）

css-in-jsjavascriptreactjsreactjsreactjsreactjsstenciljstypescripttypescripttypescript