样式化组件内部的迭代

【问题标题】：Iterations inside of styled components样式化组件内部的迭代
【发布时间】：2019-04-10 21:31:23
【问题描述】：

我的主题对象看起来像：

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

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

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

问题是它不工作:(

您是否知道如何执行这些基本操作，例如遍历对象并动态创建附加标记样式？

【问题讨论】：

潜伏者：styled-components.com/docs/api#createglobalstyle

标签： javascript styled-components

【解决方案1】：

首先，您的createGlobalStyle 代码示例有点混乱，缺少关闭) 和}。

其次，Object.keys(props.theme).map(...) 将返回一个Array。

您的目标应该是至少从该示例块返回 Template literal。

第三，针对标记名的 CSS 类不是用冒号定义的：

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

这是一个工作示例：

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

【讨论】：

谢谢，就是这样。