'Breakpoints css is not applied over props in React-jss

I am getting an issue with React-JSS. I have created a modal class for which the property of height depends on the prop passed to the component. In responsive design I want the height to be 100% but somehow it is not getting priority in CSS because React-JSS creating two classes when I used props inside styles.

React JSS Code

  modal: {
    borderRadius: 10,
    width: 750px,
    height: ({ height = 550 } => height,
    [breakpoints.MOBILE]: {
      height: 'auto',
    },
  },

Output

It creates two classes because I am accessing props in the styles and media queries not getting priority.

enter image description here

Looking forward for help.

javascriptcssreactjscss-in-js


Solution 1:[1]

You can try changing your styles as docs says this way:

modal: {
  borderRadius: 10,
  width: 750px,
  height: ({ height = 550 } => height,
},
[breakpoints.MOBILE]: {
  modal: {
    height: 'auto'
  }
}

Update. If you want nested properties such as media queries or additional selectors, you need to include this official plugin: https://cssinjs.org/jss-plugin-nested?v=v10.0.0

Solution 2:[2]

Old post now, but I had the same issue and this is what worked for me (using your example to go off of):

modal: {
  borderRadius: 10,
  width: 750px,
  height: ({ height = 550 }) => height,
  [breakpoints.MOBILE]: {
    height: () => { return 'auto'; },
  },
},

tl;dr, it seems if you use a prop function to define a style somewhere, you must use one everywhere. Then it will pick up the styles in your breakpoint.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 phen0menon
Solution 2 Steverino

Related Questions