Reactjs 具有映射数据的动态样式化组件

我试图引入一个JSON数据，它在JSON中基本上如下所示：

“项目”：[
{
“id”：“1”，
“标题”：“数据头一”，
“bgColor”：“深色”，
“按钮颜色”：“红色”，
“影子”：假，
“抵销”：1，
“填充”：0，
},
{
“id”：“2”，
“标题”：“数据头二”，
“bgColor”：“light”，
“按钮颜色”：“黑色”，
“影子”：假，
“抵销”：1，
“填充”：0，
}
]

我正试图使用

map（）

将这些数据映射到next.js函数组件中

我正在努力了解如何将

项

数据（如“padding”或“buttonColor”或“bgColor”）传递回返回渲染之外的样式化组件。有没有一种不使用内联样式的方法

我的报税表设置如下：

返回(
{items.map（{id，title，bgColor，buttonColor，shadow，padding}）=>{
返回(
{title}
)}}
);

我的样式化组件设置如下：

const Cta=styled.div`
背景：${bgColor}；
h4{
字体大小：粗体；
填充：${padding}px；
}
`;

---

我已经减少了代码，所以不要在意未使用的数据。

以下是如何使用对象属性进行样式设置：

从“React”导入React；
从“样式化组件”导入样式化；
导出默认函数App（）{
const Cta=styled.div`
背景：${props=>props.bgColor}；
h4{
颜色：蓝色；
字体大小：粗体；
填充：${props=>props.padding}px；
}
`;
常量元素=items.map（item=>(
标题
{item.title}
));
返回{elements}；
}
常数项=[
{
id:“1”，
标题：“数据头一”，
背景颜色：“深色”，
按钮颜色：“红色”，
影子：错，
抵销：1，
填充：10
},
{
id:“2”，
标题：“数据头二”，
背景颜色：“光”，
按钮颜色：“黑色”，
影子：错，
抵销：1，
填充：0
}
];

在这里，您可以阅读有关使用组件的

道具传递样式数据的更多信息：