使用Styled-System创建自定义样式的支柱

Question

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

不过，我想添加一个名为gridWrap的道具。我的愿景是采用下面的CSS代码，使用户能够针对gridWrap属性修改auto-fit的值。首先，下面是基本代码：

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

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

<MyComponent gridWrap={150} />

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

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

现在，我知道可以使用Styled-System：https://styled-system.com/custom-props/创建自定义道具

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

有没有人能给我一些指点，或者告诉我怎么做？

谢谢。

Answer 1

下面是我如何让它工作的：

import { system } from "styled-system";
import styled from "@emotion/styled";

const MyGrid = styled(Box)`
  display: grid;
  ${system({
    gridWrap: {
      property: "grid-template-columns",
      transform: value => `repeat(auto-fit, minmax(${value}, auto))`
    }
  })}
`;

export { MyGrid };

之后，我可以使用<MyGrid gridWrap="300px">呈现我的组件。