React - 如何为地图功能的每个元素设置内联 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

如果名称是唯一的，您可以将每个项目名称传递给映射的子项。