难点一：由于我使用Typescript进行开发,按照官网示例编写代码,JSX中会提示
没有与此调用匹配的重载
，即TS不知道
Button
可以传参
primary
难点二：我需要通过props的字段进行一次计算，并使用计算后的值作为
repeat
函数的传参。
官网代码如下：
const Button = styled.button`
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
render(
<Button>Normal</Button>
<Button primary>Primary</Button>
解决方案：
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")};
