Реакция - как установить inline CSS для каждого элемента функции карты?

Question

У меня есть приложение в React, где я пытаюсь прочитать данные из файла JSON. Файл JSON имеет следующий формат:

[
    {
        "name": "Max",
        "age": "21",
    },

    {
        "name": "Sam",
        "age": "18",
    }

    ........
]

Я успешно прочитал правильные данные и вывел их на экран, например:

function foo(){
    const styling = css`
        font-size: 30px;
    `;

    return(
        <div>
            {people.map((person, i) => <Format key={i} {...person} css={styling}/>)}
        </div>
    );
}

Хотя все информация правильно отображается на экране, стиль не распространяется на каждого человека. Как я могу изменить это?

РЕДАКТИРОВАТЬ

Компонент формата:

function Format({name, age}){
   return (
      <div>
         <h1>{name}</h1>
         <h2>{age}</h2>
      </div>
   );
}

Answer 1

function Format({name, age, css}){
   return (
      <div css={css}>
         <h1>{name}</h1>
         <h2>{age}</h2>
      </div>
   );
}

вы передали стиль в свой компонент, но вы не использовали их в своем дочернем компоненте

и, кроме того, использование idx в качестве ключа не является наилучшей практикой. Следующая статья объясняет почему. https://reactjs.org/docs/lists-and-keys.html

если имя уникально, вы можете передать каждое имя элемента сопоставленным дочерним элементам.