具有相同值的选择器的 JSS 数组

Question

我为我的React项目创建了一个使用JSS的全局样式表。我对CSS，SASS和CSS模块非常熟悉，但这是我第一次使用JSS。

标题将具有相同的边距。出于可维护性和性能原因，我不想键入多种类型或让它多次出现在编译样式中。我也不想为所有标题添加一个类。

由于选择器数组（[h1， h3， h4， h5， h6]）而无法正常工作的 JSS：

const globalStyles = theme => ({
    '@global': {
        body: {
            fontFamily: ['Roboto', 'sans-serif'].join(','),
        },
        [h1, h3, h4, h5, h6]: {
            margin: '0 0 .35em 0'
        },
        h1: {
            fontSize: theme.typography.pxToRem(40),
            fontWeight: 600
        },
        h3: {
            fontSize: theme.typography.pxToRem(34),
            lineHeight: 1.75
        },
        h5: {
            fontSize: theme.typography.pxToRem(28),
            lineHeight: 'normal'
        },
        h6: {
            fontSize: theme.typography.pxToRem(20),
            lineHeight: 'normal'
        }
    }
})
export default globalStyles

我正在尝试实现以下输出：

body {
    font-family: Roboto, sans-serif
}
h1, h3, h4, h5, h6 {
    margin: 0 0 .35em 0
}
h1 {
    font-size: 2.5rem;
    font-weight: 600;
}
h3 {
    font-size: 2.125rem;
    line-height: 1.75;
}
h5 {
    font-size: 1.75rem;
    line-height: normal;
}
h6 {
    font-size: 1.25rem;
    line-height: normal;
}

这在JSS中可能吗？我已经对JSS进行了一些阅读，但还没有找到解决方案。

Answer 1

只需将它们放入逗号分隔的字符串中，就像在常规的老式 CSS 中一样：

'@global': {
  'h1, h3, h4, h5, h6': {
     margin: "0 0 .35em 0"
  }
}

可以使用

例如。 当然，[…].join(', ')构造字符串（就像你对上面的font-family所做的那样）。

Answer 2

[h1， h3， h4， h5， h6] 是一个错误的 JavaScript 语法，不是特定于 JSS。一个属性中只能有一个变量。所以你可以写[H]，其中h是一个变量，你必须提前定义或直接定义为字符串文字['H1']，这没有多大意义，因为你可以直接将其用作属性。如果你愿意，如果你真的需要这些变量，你也可以这样表达它。它之所以有效，是因为内部数组将被强制转换为字符串，默认情况下，该字符串在 js： 中转换为逗号分隔值：[1,2].toString()

  const h1 = 'h1'
  const h2 = 'h2'
  '@global': {
    [[h1, h2]]: {
      color: 'red'    
    }
  }