使用樣式化組件

Question

我有一個需要使用樣式組件設置樣式的按鈕。 由於我是新手，因此我需要您的幫助，以使按鈕顏色在成功時變為綠色，在失敗時變為藍色。 此外，我還有 class 卡預覽，當我在使用樣式組件時在其上使用 hover 時需要有框陰影。下面的代碼將讓您了解我正在嘗試做什么。

import styled from "styled-components";

const Button = styled.button`
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 1.3rem;
  background: ${(props) => (props.success ? "green" : "blue")};
  color: white;
`;

const Cardlist = ({ cards, title }) => {
  return (
    <div className="card-list">
      <h2>{title}</h2>
      {cards.map((card) => (
        <div className="card-preview" key={card.id}>
          <h2>{card.name}</h2>
          if({card.status}==='success')
          <Button success>{card.status}</Button>
          else
          <Button pending>{card.status}</Button>
        </div>
      ))}
    </div>
  );
};
export default Cardlist;

Answer 1

對於按鈕和 CSS，我認為你所擁有的應該可以工作，盡管它可能更干燥。 if-else在 JSX 中是無效的。 我也不確定你對pending的道具做了什么，但這似乎是success “狀態”的對立面。

const Button = styled.button`
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 1.3rem;
  background: ${(props) => (props.success ? "green" : "blue")};
  color: white;
`;

...

{cards.map((card) => (
  <div className="card-preview" key={card.id}>
    <h2>{card.name}</h2>
    <Button
      success={card.status === 'success'}
      pending={card.status !== 'success'} // <-- may not be necessary
    >
      {card.status}
    </Button>
  </div>
))}

要將某些樣式應用於card-preview div，您只需要將其轉換為樣式組件。

const CardPreview = styled.div.attrs(() => ({
  className: "card-preview",
}))`
  :hover { // <-- sometimes you need &:hover to get the parent node
    // apply box-shadow and any other CSS rules here
  }
`;

然后將 div 替換為CardPreview組件。

{cards.map((card) => (
  <CardPreview key={card.id}>
    <h2>{card.name}</h2>
    <Button success={card.status === 'success'} >
      {card.status}
    </Button>
  </CardPreview>
))}

請參閱偽選擇器和嵌套

更新：關於.attrs

這是一種可鏈接的方法，可將一些道具附加到樣式組件。

它只是允許您在創建組件時與使用時指定 prop 值。 className prop 看起來是 static “card-preview”，所以不妨設置一次然后忘記它（在這種特定情況下）。