Javascript 可以将常量引入ReactJSS样式表吗？

使用ReactJSS，我构建了如下样式表：

const styleSheet = {
  mainContainer: {
    height: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBodyContainer: {
    overflowY: 'auto'
  },
  '@media (min-width: 576px)': {
    modalBodyContainer: {
      padding: '0 100px',
      maxHeight: 'calc(80vh - 185px)'
    }
  },
  errorStateDropdown: {
    border: [['1px solid red'], '!important']
  }
};

export default styleSheet;

我现在刚刚开始介绍一些响应性代码，如这一行所示：

@media（最小宽度：576px）

与其一遍又一遍地重复

576px

，我更愿意将其设置为一个常量并重用该常量

---

ReactJSS文档非常稀少，所以我不知道这是否可行。如果你有什么建议，我很乐意听听。

样式表

是一个常规的javascript

对象

const height = '518px'
const minWidth = '500px'

const styleSheet = {
  mainContainer: {
    height,
    display: condition ? 'flex' : 'block',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBodyContainer: {
    overflowY: 'auto'
  },
  [`@media (min-width: ${minWidth})`]: {
    modalBodyContainer: {
      padding: '0 100px',
      maxHeight: getMaxHeight()
    }
  },
  errorStateDropdown: {
    border: [['1px solid red'], '!important']
  }
};

export default styleSheet;

---

您缺少动态属性键周围的括号。一如既往地感谢^^@Dupocas感谢您的反馈。结果我的linter不喜欢我多次使用媒体查询。因此，取而代之的是，我只在样式表对象末尾附近放一次，然后将所有“仅桌面”CSS代码分组。这很好，而且可以说更好，因为现在新开发人员可以立即看到非移动视图的所有修改。因此，它遵循了“移动优先”的最佳实践。是的，这是一种模式，每种大小只需要一个媒体查询，并将所有类分组在它可能的副本中