Question

我正在使用@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} />

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

Answer 1

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

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

Answer 2

之所以发生这种情况，是因为没有在样式对象上正确定义媒体查询。

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

希望这对您有用。

Answer 3

这里有两件事。

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

安装-npm install --save radium

如何使用它？

一旦您安装了镭，则整个应用程序都应包含<StyleRoot/>，这是镭的命名出口。最好的方法是在index.js中。

index.js

import { StyleRoot } from "radium";

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

  document.getElementById("root")
);

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

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

jss中的媒体查询不响应

3 个答案: