1
votes

La requête multimédia en jss ne répond pas

J'utilise des accessoires de style dans mon élément react avec la requête @media. Mais pour une raison quelconque, il ne répond pas. J'utilise JSS. Voici mon code

<div style={styles.usernameConatiner} />

Il y a évidemment tout un tas d'autres règles css au milieu. J'ai également essayé d'imbriquer la requête multimédia qui ne fonctionne pas non plus.

Il est rendu de la manière suivante

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

Est-ce que je rate quelque chose de très évident ici?

reactjs css responsive-design jss

2 commentaires

Ne devrait-il pas être quelque chose comme: "@media screen and (min-width: 32em)" ?

Dans Chrome, cela me donne une erreur de propriété de style et de média compatible avec l'écran et la largeur minimale (32em)

3 Réponses :

0
votes

Comme vous êtes déjà dans JS et que vous souhaitez écrire un style qui dépend de la largeur, ne serait-il pas plus facile d'obtenir le window.width et de définir vos objets de style en conséquence?

En vous rappelant toujours que vous pouvez utiliser window.addEventListener('resize', this.updateWindowWidth); pour gérer les changements.

0 commentaires

2
votes

Cela se produit parce que votre requête multimédia n'est pas définie correctement sur l'objet styles.

La requête multimédia correcte serait @media screen and (min-width: 32em) , notez min-width: 32em est à l'intérieur de la parenthèse, et notez également que min-width (séparé par un tiret) au lieu de minWidth (camelCase )

Vérifiez qu'il fonctionne sur CodePen: https://codepen.io/anon/pen/yGEXox

Pour résumer, votre objet styles devrait ressembler à ceci:

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

J'espère que cela fonctionne pour toi.

0 commentaires

0
votes

Deux choses ici.

La syntaxe de votre media query n'est pas correcte.
Vous ne pouvez pas utiliser les requêtes multimédias / pseudo sélecteurs comme &:hover, &:disabled et ainsi de suite dans JSS (CSS dans JS) directement. Pour ce faire, vous devez installer un package tiers Radium https://www.npmjs.com/package/radium
Installation - npm install --save radium

Comment l'utiliser?

Une fois que vous avez installé radium, toute votre application doit être entourée de <StyleRoot/> qui est une exportation nommée à partir de radium. Le meilleur endroit pour faire cela est dans index.js.

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

Vous devez maintenant envelopper le composant dans lequel vous utilisez vos requêtes multimédias avec Radium comme ceci. Cela peut être fait pour les composants de classe et fonctionnels.

MyComponent.js

import { StyleRoot } from "radium";

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

  document.getElementById("root")
);

0 commentaires