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

Question

我为使用 JSS 的 React 项目创建了一个全局样式表。我对 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 所做的那样)。