Итерации внутри стилизованных компонентов

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.

Вы должны стремиться хотя бы вернуть Шаблонный литерал из этого примера блока.

В-третьих, классы CSS, нацеленные на тэги, не определяются двоеточиями:

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

Вот рабочий пример:

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