Media query in jss not responive

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.