Медиа-запрос в jss не отвечает

Я использую стиль реквизита в своем элементе реагирования с запросом @media. Но по какой-то причине он не отвечает. Я использую JSS. Вот мой код

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

Очевидно, что в середине есть целый ряд других правил CSS. Я также попытался вложить медиа-запрос, который тоже не работает.

Оказывается следующим образом

<div style={styles.usernameConatiner} />

Я что-то упускаю здесь очень очевидное?

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"
    }
  }
}

Надеюсь, что это работает для вас.

Поскольку вы уже находитесь в JS и хотите написать стиль, который зависит от ширины, не проще ли получить window.width и соответственно определить ваши объекты стиля?

Всегда помня, что вы можете использовать window.addEventListener('resize', this.updateWindowWidth); обрабатывать изменения.

Здесь две вещи.

  1. Твой media query синтаксис неверный.

  2. Вы не можете использовать медиа-запросы / псевдоселекторы, такие как &:hover, &:disabledи так далее в JSS (CSS в JS) напрямую. Для этого необходимо установить сторонний пакет Radium https://www.npmjs.com/package/radium

    Установка - npm install --save radium

Как это использовать?

После установки радия все ваше приложение должно быть заключено в <StyleRoot/>который является названным экспортом радия. Лучше всего это сделать в ind ex.js.

ind ex.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); 
Другие вопросы по тегам