jss中的媒体查询不响应

塔莎·丘塔尼（Tushar Chutani）

我在带有@media查询的react元素中使用样式道具。但是由于某种原因，它没有响应。我正在使用JSS。这是我的代码

const style = {
    usernameConatiner: {
        display: "flex",
        alignItems: "center",
        backgroundColor: "red"
    },  
    "@media screen and minWidth(32em)": {
        usernameConatiner: {
            backgroundColor: "blue"
        }
     }
}

中间显然还有很多其他CSS规则。我也尝试嵌套无法运行的媒体查询。

它以以下方式呈现

<div style={styles.usernameConatiner} />

我在这里错过了很明显的东西吗？

d4vsanchez

发生这种情况是因为没有在styles对象上正确定义媒体查询。

正确的媒体查询为@media screen and (min-width: 32em)，注意min-width: 32em在括号内，并且还注意将其写为min-width（用破折号分隔）而不是minWidth（camelCase）

检查它是否可以在CodePen上正常工作：https ://codepen.io/anon/pen/yGEXox

总而言之，您的样式对象应如下所示：

const style = {
  usernameContainer: {
    display: 'flex',
    alignItems: 'center',
    backgroundColor: 'red'
  },  
  '@media screen and (min-width: 32em)': {
    usernameContainer: {
      backgroundColor: "blue"
    }
  }
}

希望这对您有用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。