title: styled-components: pass props to another component
body: <p>I'm trying to build a grid component using TypeScript and styled-components. I have the following to files in a <strong>Grid</strong> folder:</p>
  
  <ul>
  <li>index.tsx</li>
  <li>Cell.tsx</li>
  </ul>
  
  <h2>What I'm trying to achieve</h2>
  
  <p>The Grid (<code>index.tsx</code>) has a prop (<code>gutters</code>) that can be set to <code>margin</code>. I want to be able to pass this prop down to <code>Cell.tsx</code> and output different CSS if that's the case.</p>
  
  <h2>index.tsx</h2>
  
  <pre><code>import * as React from "react";
  import styled, { css } from "styled-components";
  
  import { Cell } from "./Cell";
  
  export { default as Cell, ICellProps } from "./Cell";
  
  export interface IGridProps {
    className?: string;
    /** Grid items */
    children: any;
    /** Grid gutters */
    gutters?: "padding" | "margin" | "none";
  }
  
  export const Grid = styled.div&lt;IGridProps&gt;`
    ${p =&gt; p.gutters !== "none" &amp;&amp; css`
      margin-right: -1rem;
      margin-left: -1rem;
    `}
  
    ${p =&gt; p.gutters === "padding" &amp;&amp; css`
      &amp; &gt; ${Cell} {
        padding-right: 1rem;
        padding-left: 1rem;      
      }
    `}
  
    ${p =&gt; p.gutters === "margin" &amp;&amp; css`
      &amp; &gt; ${Cell} {
        margin-right: 1rem;
        margin-left: 1rem;
      }
    `}
  `;
  
  export default ({
    className,
    children,
    gutters = "none",
  }: IGridProps) =&gt; (
    &lt;Grid
      className={className}
      gutters={gutters}
    &gt;
      {children}
    &lt;/Grid&gt;
  );
  </code></pre>
  
  <h2>Cell.tsx</h2>
  
  <pre><code>import * as React from "react";
  import styled, { css } from "styled-components";
  
  import { IGridProps } from "./";
  
  interface ICell {
    s: number;
    offset?: number;
  }
  
  export interface ICellProps extends IGridProps {
    className?: string;
    children: any;
    sm?: ICell;
    md?: ICell;
    lg?: ICell;
  }
  
  const calcWidth = (size: number) =&gt; `${(size / 12) * 100}%`;
  
  export const Cell = styled.div&lt;ICellProps&gt;`
    flex: 0 0 auto;
  
    min-width: 0;
    width: 100%;
    min-height: 0;
  
    ${p =&gt; p.sm &amp;&amp; css`
      @media screen and (min-width: 0) {
        margin-left: ${p.sm.offset &amp;&amp; calcWidth(p.sm.offset)};
        width: ${p.gutters === "margin" ? `calc(${p.sm.s &amp;&amp; calcWidth(p.sm.s)} - 2rem)` : (p.sm.s &amp;&amp; calcWidth(p.sm.s))};
      }
    `}
  `;
  
  export default ({
    className,
    children,
    sm,
    md,
    lg,
  }: ICellProps) =&gt; (
    &lt;Cell
      className={className}
      sm={sm}
      md={md}
      lg={lg}
    &gt;
      {children}
    &lt;/Cell&gt;
  );
  </code></pre>
  
  <p>I want to make a calculation of [the breakpoint width] - 2rem (breakpoints are defined with the <code>sm</code>, <code>md</code> and <code>lg</code> props in <code>Cell.tsx</code>). This is what I tried to achieve in <code>Cell.tsx</code> on this line:</p>
  
  <pre><code>width: ${p.gutters === "margin" ? `calc(${p.sm.s &amp;&amp; calcWidth(p.sm.s)} - 2rem)` : (p.sm.s &amp;&amp; calcWidth(p.sm.s))};
  </code></pre>
  
  <p>I know that's not how it works, but I haven't found a way of passing the props from the parent.</p>
  
  <p>I've tried googling this for hours and can't find anything, so any help to get me on the right track would be highly appreciated.</p>