Question

我想在媒体查询断点定义中使用来自常量文件的变量。我想写这样的东西：

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

它在终端的加号上抛出了这个错误：

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

如果我可以使用变量来定义断点，那将会很棒。有解决方案吗？

Answer 1

嗯，你不能像那样连接字符串，正确的方法是使用模板文字

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

我更喜欢这种方式，因为它会更清洁

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

Answer 2

我使用反引号运算符并将.footer1放在您的媒体查询中，请参见以下代码：

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

如何在JSS中定义媒体查询的断点时使用变量

2 个答案: