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

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

Это происходит из-за того, что ваш медиа-запрос неправильно определен для объекта стилей.

Правильный медиа-запрос будет @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 2

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

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