Emotion + Facepaint - 使用道具而不是媒体查询答案

【问题标题】：Emotion + Facepaint - use props instead of media queriesEmotion + Facepaint - 使用道具而不是媒体查询
【发布时间】：2020-08-18 15:56:10
【问题描述】：

我正在一个项目中使用情感，并希望像这样使用随附的 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
}))

但是，这不会根据 set 属性更改 CSS。由于我在 facepaint 文档上找不到任何关于它的信息，我想知道是否还有其他方法可以完成上述操作？

谢谢！

【问题讨论】：

标签： javascript reactjs typescript stenciljs css-in-js

【解决方案1】：

呃！

这很简单：

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 ;)

【讨论】：