React：styled components關於props的使用

場景

向grid傳入一個count字段，確定grid有多少行。

實現

• 難點一：由於我使用Typescript進行開發,按照官網示例編寫代碼,JSX中會提示沒有與此調用匹配的重載，即TS不知道Button可以傳參primary
• 難點二：我需要通過props的字段進行一次計算，並使用計算后的值作為repeat函數的傳參。

官網代碼如下：

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

解決方案：

const Wrapper = styled.div`
  display: grid;
  grid-template: ${(props: { count: number }) =>
    `repeat(${(props.count / 2).toFixed(0)}, 5rem) / 50fr 50fr`};
  justify-items: center;
  align-items: center;
`;

const products = [1,2,3,4,5,6,7];
<Wrapper count={products.length}>
    {products.map((item) => (
      <p>{item}</p>
    ))}
</Wrapper >

• 解決難點一：使用props時指定類型，然后在JSX中會傳參就不會報錯。
• 解決難點二：只能通過返回字符串的方式實現

解決方案2（推薦）：

const MainBody = styled.section<{ colorWeak: Config['colorWeak']; layout: Config['layout'] }>`
  display: flex;
  filter: ${props => (props.colorWeak ? "invert(80%)" : "none")};
  flex-direction: ${props => (props.layout === 'side' ? "row" : "column")};
`