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

【问题标题】：How to use variables in defining breakpoints of media query in JSS如何使用变量在 JSS 中定义媒体查询的断点
【发布时间】：2018-05-02 08:55:52
【问题描述】：

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

.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)': {
                      ^

如果我可以使用变量来定义断点，那就太好了。有解决办法吗？

【问题讨论】：

标签： jss

【解决方案1】：

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

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

我更喜欢这种方式，因为这样会更干净

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

【讨论】：

【解决方案2】：

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

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

【讨论】：