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(...)将返回一个Array。

您应该旨在至少从该示例块中返回一个Template literal。

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

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

这是一个可行的示例：

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

样式化组件内部的迭代

1 个答案: