Creating a Custom Styled Prop Using Styled-System

Question

Styled-System has a number of props relating to css grid : https://styled-system.com/api/#grid-layout

I would like to add, though, a prop called gridWrap . My vision is to take the following CSS code and enable someone to modify the auto-fit value vis-a-vis the gridWrap prop. First, here is the base code:

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

My vision is that the prop gridWrap would change the 300px value to whatever is entered. For example:

<MyComponent gridWrap={150} />

That would automatically inject the following css code into that component:

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

Now, I know that it is possible to create custom props using Styled-System : https://styled-system.com/custom-props/

But I am having a hard time figuring out from the docs how I am supposed to create the custom gridWrap prop that I described above.

Could anyone give me some pointers or show me how it could be done?

Thanks.

Answer 1

Here's how I've gotten it to work:

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 };

After which I can render my component using <MyGrid gridWrap="300px"> .