使用 Styled-System 创建自定义样式的道具答案

【问题标题】：Creating a Custom Styled Prop Using Styled-System使用 Styled-System 创建自定义样式的道具
【发布时间】：2019-09-18 11:35:54
【问题描述】：

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 gridWrap={150} />

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

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

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

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

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

谢谢。

【问题讨论】：

标签： javascript reactjs react-props react-component

【解决方案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"> 渲染我的组件。

【讨论】：