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

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',
   },
}