React项目emotion库嵌套方括号CSS选择器含义求教

这个写法是Emotion生态为对象式CSS声明提供的专属语法糖，不属于标准CSS语法，仅在Emotion的对象样式定义场景下生效，具体作用如下：

• 它的本质是批量生成逗号分隔的多选择器规则，你给出的代码最终会被Emotion编译为标准CSS：

  h1, h2, h3, h4, h5, h6 {
    /* 你定义的CSS属性 */
  }
  

• 语法结构拆分：外层的[]是JS原生的计算属性名语法，用来声明对象的键是括号内表达式的执行结果；内层的标签数组是你要批量命中的选择器列表，Emotion识别到对象键为数组类型时，会自动把数组内的所有元素用逗号拼接成完整的选择器字符串。
• 这个写法最大的用处是简化动态选择器场景的代码：如果你的选择器列表是从变量/配置来的，不需要手动调用join(',')做字符串拼接，直接把数组作为计算属性传入即可，示例如下：

  // 从配置文件导出的标题标签列表
  const titleTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
  // 直接传入数组作为样式键，不需要额外处理
  const globalStyle = {
    [titleTags]: {
      margin: 0,
      lineHeight: 1.2
    }
  }
  

• 注意该语法仅在对象式CSS写法中可用，如果你用的是css模板字符串写法，需要手动写逗号分隔的选择器，不支持数组传入。

内容的提问来源于stack exchange，提问作者Andy Nguyen