Медиа-запрос в 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);
обрабатывать изменения.
Здесь две вещи.
Твой
media query
синтаксис неверный.Вы не можете использовать медиа-запросы / псевдоселекторы, такие как
&: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);