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

【问题标题】：Choose Different properties according to firebase styled components reactjs根据firebase样式的组件reactjs选择不同的属性
【发布时间】：2021-06-01 19:08:54
【问题描述】：

我试图找到一种解决方案，根据样式组件的值为我的背景着色，但我找不到。

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

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

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

感谢您的帮助。

【问题讨论】：

请在您的问题中包含您正在渲染Projettype 组件并尝试将道具传递给它的位置。你想为每种情况使用什么颜色？请尽量详细。

标签： reactjs firebase google-cloud-firestore styled-components

【解决方案1】：

解决方案：

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

您必须在要更改颜色的容器中添加一个道具 ID，此处为“类型”。

然后，只需在样式组件中添加条件即可。

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

【讨论】：