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

Question

使用 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 (min-width: 576px)'

与其一遍又一遍地重复 576px，我更愿意将它设置为一个常量并重复使用该常量。

ReactJSS 文档非常少，所以我不知道这是否可行。如果您有任何建议，我很乐意听取。

Answer 1

Stylesheet 是一个常规的 javascript object。

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;