css 中的媒体查询没有响应

Question

我在带有@media 查询的反应元素中使用样式道具。但由于某种原因，它没有响应。我正在使用 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

由于您已经在 JS 中并且想要编写一个依赖于宽度的样式，获取 window.width 并相应地定义您的样式对象不是更容易吗？

永远记住您可以使用 window.addEventListener('resize', this.updateWindowWidth); 来处理更改。

Answer 2

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

正确的媒体查询应该是 @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"
    }
  }
}

希望这对你有用。

Answer 3

这里有两件事。

您的 media query 语法不正确。
你不能在JSS中直接使用&:hover, &:disabled等媒体查询/伪选择器（在JS中是CSS）。为此，您必须安装第三方软件包 Radium https://www.npmjs.com/package/radium

安装 - npm install --save radium

如何使用？

安装 radium 后，您的整个应用程序应包含在 <StyleRoot/> 中，这是 radium 的命名导出。执行此操作的最佳位置是 index.js.

index.js

import { StyleRoot } from "radium";

ReactDOM.render(
  <StyleRoot>
    <App />
  </StyleRoot>,

  document.getElementById("root")
);

您现在需要像这样用 Radium 包装您正在使用媒体查询的组件。 class 和功能组件都可以这样做。

MyComponent.js

import Radium from 'radium'
     
function MyComponent(){

const myStyle = {
 
   color: 'blue',
   backgroundColor : 'red',
   
   // media query

   "@media (max-width: 1100px)": {

      color:'orange',
      backgoundColor : 'black'
     
    }, 

}

return (
  <p style = {myStyle}>Enter your text here</p>
)

}

export default Radium(MyComponent);

css 中的媒体查询没有响应

Media query in jss not responive

css

responsive-design

reactjs

jss