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

如果名稱是唯一的，您可以將每個項目名稱傳遞給映射的子項。