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