根据firebase样式的组件reactjs选择不同的属性

Question

我试图找到一个解决方案，根据我的值与样式组件的背景颜色，但我找不到它。

我用这个来检索我的数据库中的数据

function getOrders(uid) {
fire.firestore().collection("orders")
.where('uid', '==', `${uid}`)
.where("statut", "==", 'Terminé')
.onSnapshot(function (querySnapshot) {
setOrders(
querySnapshot.docs.map((doc) => ({
id: doc.id,
orderid: doc.data().id,
statut: doc.data().statut,
nomproduit: doc.data().nomproduit,
type: doc.data().type

}))
);
});
}

我用它来设置我的css项目类型

export const Projettype = styled.div`
background-color:#d6f5fa;
padding: 7px;
border-radius: 13px;
font-weight: bold;
color: #7abeca;
max-width:120px;
text-align:center;
font-size:15px;
`;

我想要的是，如果在我的数据库状态==回顾，我可以选择一个颜色，==完成另一个颜色，并通过传递属性到我的样式组件完成另一个。

谢谢你的帮助。

Answer 1

解决方案:

<ProjetCard type={order.type} key={order.id}>

你必须在你想要改变颜色的容器中添加一个道具ID这里是&;type&;

然后，在样式组件中添加条件。

export const ProjetCard = styled.div`
height: 200px;
width: 150px;
border-radius: 15px;
margin: 10px;
display:flex;
flex-direction:column;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: 0.2s ease-in-out;
&:hover {
transform: scale(1.05);
transition: 0.2s ease-in-out;
}
${props => {
if (props.type === 'Adcopy') return `
background-color: #d6f5fa;

`
else if (props.type === 'Miniature') return `
background-color: #f9abaf;

`
else if (props.type === 'Fiche Produit') return `
background-color: #dde0fa;

`
else if (props.type === 'Vidéo') return `
background-color: #fff3e0;

`
} 
}
`;