使用样式系统创建自定义样式道具

Question

Styled-System有许多与css grid相关的道具：https://styled-system.com/api/#grid-layout

不过，我想添加一个名为gridWrap的道具。我的愿景是采用以下CSS代码，并允许某人相对于auto-fit道具来修改gridWrap的值。首先，这是基本代码：

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))

我的设想是，道具gridWrap会将300px的值更改为输入的值。例如：

<MyComponent gridWra={150} />

这将自动将以下CSS代码注入该组件：

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))

现在，我知道可以使用Styled-System：https://styled-system.com/custom-props/

创建自定义道具

但是我很难从文档中弄清楚如何创建上面描述的自定义gridWrap道具。

谁能给我一些指导或告诉我如何做到这一点？

谢谢。