CODEWITHSUNDEEP
cssreactjsresponsive-designjss
Tushar Chutani
Tushar Chutani

Reputation: 1570

Media query in jss not responive

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?

Upvotes: 4

Views: 2951

Answers (3)

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6946

Two things here.

  1. Your media query syntax is not correct.

  2. 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);

Upvotes: 0

d4vsanchez
d4vsanchez

Reputation: 1994

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.

Upvotes: 4

aquilesb
aquilesb

Reputation: 2272

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.

Upvotes: 0

Related Questions