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

我试图找到一个解决方案，根据样式化组件的值来给我的背景上色，但我找不到

我使用它来检索数据库中的数据

 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
      
    }))
  );
    });
  }

我用它来设置Projettype的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;
`;

我想要的是，如果在我的数据库状态==in review中，我可以选择一种颜色，==完成另一种颜色，并通过将属性传递给我的样式化组件来完成另一种颜色

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;
       
    `
    } 
  }
`;

感谢您的帮助。

解决方案：

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

---

请在问题中包括呈现

projetype

组件的位置，并尝试向其传递道具。你想用什么颜色来搭配每个箱子？请尽量详细。