css - css 中的媒体查询没有响应

Question

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

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

中间显然还有一大堆其他的 css 规则。我还尝试嵌套也不起作用的媒体查询。

它是通过以下方式呈现的

<div style={styles.usernameConatiner} />

我是否遗漏了一些非常明显的东西？

Answer 1

这是因为您的媒体查询没有在样式对象上正确定义。

正确的媒体查询应该是@media screen and (min-width: 32em)，注意min-width: 32em在括号内，还要注意写成 min-width(用破折号分隔)而不是 minWidth(驼峰式)

检查它在 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"
    }
  }
}

希望这对你有用。