Media query in jss not responive - css

Question

I am using style props in my react element with #media query. But for some reason it isn't responding. I am using JSS. Here is my code
const style = {
usernameConatiner: {
display: "flex",
alignItems: "center",
backgroundColor: "red"
},
"#media screen and minWidth(32em)": {
usernameConatiner: {
backgroundColor: "blue"
}
}
}
There is obviously a whole bunch of other css rules in the middle. I have also tried to nest the media query which isn't working either.
It is rendered in the following way
<div style={styles.usernameConatiner} />
Am I missing something very obvious here?

Answer 1

It's happening because your media query is not being defined correctly on the styles object.
The correct media query would be #media screen and (min-width: 32em), notice min-width: 32em is inside the parenthesis, and also notice that is written as min-width (separated with a dash) instead of minWidth (camelCase)
Check it working on CodePen: https://codepen.io/anon/pen/yGEXox
To summarize, your styles object should look like this:
const style = {
usernameContainer: {
display: 'flex',
alignItems: 'center',
backgroundColor: 'red'
},
'#media screen and (min-width: 32em)': {
usernameContainer: {
backgroundColor: "blue"
}
}
}
Hope this works for you.

Answer 2

As you already are in JS and want to write a style that depends on width, wouldn't be easier to get the window.width and define your style objects accordingly?
Always remembering you may use window.addEventListener('resize', this.updateWindowWidth); to handle the changes.

Answer 3

Two things here.
Your media query syntax is not correct.
You can't use media queries / pseudo selectors like &:hover, &:disabled and so on in JSS (CSS in JS) directly. To do this, you must install a thrid party package Radium https://www.npmjs.com/package/radium
Installation - npm install --save radium
How to use it?
Once you install radium, your entire app should be enclosed with <StyleRoot/> which is a named export from radium. The best place to do this is in index.js.
index.js
import { StyleRoot } from "radium";
ReactDOM.render(
<StyleRoot>
<App />
</StyleRoot>,
document.getElementById("root")
);
You now need to wrap the component that you are using your media queries in with Radium like this. This can be done for both class and functional components.
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);