样式化组件内部的迭代

Question

我有如下主题对象：

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

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

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

问题是它不工作:(

您是否知道如何执行诸如遍历对象和动态创建附加标记样式等基本操作？

Answer 1

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

其次 Object.keys(props.theme).map(...) 将 return 一个 Array。

您的目标应该至少是 return 一个 Template literal 来自该示例块。

第三，CSS 类目标标记名未使用冒号定义：

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

这是一个工作示例：

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

样式化组件内部的迭代

Iterations inside of styled components

javascript

styled-components