title: React styled-components reusable Gutter function + TypeScript
body: <p>I'm trying to create a reusable styled-component Gutter function that I will be able to use on any component. This is a code I have:</p>
  <pre><code>import { PxToRem } from 'utils/functions/PxToRem';
  
  export type GutterSize = 1 | 2 | 4 | 6 | 8 | 10 | 15 | 20 | 25 | 30 | 40 | 50;
  
  export const Gutter = {
      1: PxToRem(1),
      2: PxToRem(2),
      4: PxToRem(4),
      6: PxToRem(6),
      8: PxToRem(8),
      10: PxToRem(10),
      15: PxToRem(15),
      20: PxToRem(20),
      25: PxToRem(25),
      30: PxToRem(30),
      40: PxToRem(40),
      50: PxToRem(50)
  };
  
  export const gutterConfig = ({ gutter, value }: any) =&gt;
  gutter === value &amp;&amp;
      css`
          margin: ${Gutter[value]};
      `;
  </code></pre>
  <p>and then I want to use it on any component (styled-component) like this:</p>
  <pre><code>interface BoxStyledProps {
      gutter?: GutterSize;
  }
  
  export const Box = styled.div&lt;BoxStyledProps&gt;`
      ${gutterConfig}
  `;
  </code></pre>
  <p>or</p>
  <pre><code>interface HeaderStyledProps {
      gutter?: GutterSize;
  }
  
  export const Header = styled.header&lt;HeaderStyledProps&gt;`
      ${gutterConfig}
  `;
  </code></pre>
  <p>which will be then used in actual <code>tsx</code> as:</p>
  <pre><code>&lt;Box gutter={50}&gt;
     ...
  &lt;/Box&gt;
  </code></pre>
  <p>or</p>
  <pre><code>&lt;Header gutter={10}&gt;
     ...
  &lt;/Header&gt;
  </code></pre>
  <p>The problem I'm facing is that in the following function a <code>${Gutter[value]}</code> is not reachable so the added margins are not visible in the UI.</p>
  <pre><code>// &quot;any&quot; should be also better typed but I dont know which type to use
  
  export const gutterConfig = ({ gutter, value }: any) =&gt;
  gutter === value &amp;&amp;
      css`
          margin: ${Gutter[value]}; /* Problem here, or maybe somewhere else if the approach itself is not good */
      `;
  </code></pre>
  <p>The idea behind this is to be able to use these kinds of utility functions anywhere without repeating the code in every styled-component I wish to apply the margins for example.</p>
  <p>Any suggestions? Thanks!</p>