Javascript 样式化组件内部的迭代

我有一个主题对象，它看起来像：

{
  h1: {
    color: red
  },
  h2: {
    color: blue
  }
}

我希望遍历该对象并动态创建样式化组件样式定义，如：

createGlobalStyle`
   ${props => Object.keys(props.theme).map(header => {
     return css`
     ${header}: {
       color: ${props.theme[header].color;
     }
     ` 
   }
`

问题是它不起作用：(

---

你可能知道如何做一些基本的事情，比如遍历对象并动态创建附加的标记样式吗？

首先，你的

createGlobalStyle

代码示例有点乱，缺少结尾

）

和

}

其次，

Object.keys（props.theme）.map（…）

将返回一个

数组

您的目标应该是至少从该示例块返回一个

第三，针对标记名的CSS类没有使用冒号定义：

${header}: {
    color: ${props.theme[header].color;
}

下面是一个工作示例：

${({ theme }) => {
    let templateLiteral = ``;
    Object.keys(theme).forEach(n => {
        templateLiteral += `
            .${n} {
                color: red;
            }
        `;
    });
    return templateLiteral;
}}

首先，您的
createGlobalStyle
代码示例有点乱，到处都缺少关闭
）
和
}

其次，
Object.keys（props.theme）.map（…）
将返回一个
数组

您的目标应该是至少从该示例块返回一个

第三，针对标记名的CSS类没有使用冒号定义：

${header}: {
    color: ${props.theme[header].color;
}

下面是一个工作示例：

${({ theme }) => {
    let templateLiteral = ``;
    Object.keys(theme).forEach(n => {
        templateLiteral += `
            .${n} {
                color: red;
            }
        `;
    });
    return templateLiteral;
}}

潜伏者：潜伏者：谢谢，就这样。谢谢，就这样。