1

I want to use my variable from a constant file in media query breakpoint definition. I want to write something like this:

.footer1 {
  '@media (max-width: ' + Breakpoint.mobile + 'px)': {
    position: "fixed",
    bottom: 0,
    left: 0,
    width: "100vw",
   },
  }

It throws me this error on on the plus sign in terminal: 

Module build failed: SyntaxError: Unexpected token (7:28)
'@media (min-width: ' + STYLE_CONST.breakPoints.tablets + 'px)': {
                      ^

It would be great if I can use variables for defining breakpoints. Is there a solution?

Vineet 'DEVIN' Dev
  • 1,183
  • 1
  • 10
  • 35

2 Answers2

2

Well you can't concatenating the string like that, The proper way is by using template literals

 [`@media (max-width:${Breakpoint.mobile}px)`]

I prefer this way, since it would be much cleaner

const mobileBreak = '@media (max-width: 720px)';
.footer1 {`
 [mobileBreak]: `{
    position: "fixed",
    bottom: 0,
    left: 0,
    width: "100vw",
   },
  }
Afgan Halbana
  • 21
  • 2
2

I proffer use backquote operator and putting .footer1 inside of your media query, see below code:

[`@media (max-width:${Breakpoint.mobile}px)`]: {
  .footer1 : {
    position: 'fixed',
    bottom: 0,
    left: 0,
    width: '100vw',
   },
}