title: This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)
body: <p>I am writing a component <code>Text</code> that accepts <code>size</code> prop based on which a Styled component could be returned. I am using the polymorphic <code>as</code> prop from Styled Components to do so. However, when TypeScript keeps throwing these errors. I am also using transient props to prevent passing the props intended for StyledText to the ReactNode.</p>
  <p>For <code>&lt;StyledText&gt;</code> component</p>
  <pre><code>This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)
  </code></pre>
  <p>And for <code>as</code> prop in Styled Components</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(props: Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLSpanElement&gt;, HTMLSpanElement&gt;, &quot;color&quot; | &quot;slot&quot; | ... 252 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; } &amp; StyledTextProps, &quot;color&quot; | ... 259 more ... | &quot;$align&quot;&gt; &amp; Partial&lt;...&gt;, &quot;color&quot; | ... 259 more ... | &quot;$align&quot;&gt; &amp; { ...; } &amp; { ...; }): ReactElement&lt;...&gt;', gave the following error.
      Type 'string' is not assignable to type 'never'.ts(2769)
  
  </code></pre>
  <p>I have created a simplified example in <a href="https://codesandbox.io/s/dazzling-leftpad-2nbde?file=/src/Text.tsx" rel="nofollow noreferrer">Sandbox</a></p>
  <p>Any pointers on what am I doing wrong or recommended reading is highly appreciated.</p>
  <p>Also pasting the code below:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  
  export interface TextProps {
    color?: &quot;primary&quot; | &quot;secondary&quot; | &quot;primaryText&quot; | &quot;secondaryText&quot; | &quot;error&quot;;
    size?: &quot;1&quot; | &quot;2&quot; | &quot;3&quot; | &quot;4&quot; | &quot;5&quot; | &quot;6&quot; | &quot;overline&quot;;
    weight?: &quot;normal&quot; | &quot;bold&quot; | &quot;bolder&quot; | &quot;lighter&quot; | &quot;number&quot;;
    display?: &quot;inline&quot; | &quot;block&quot; | &quot;inherit&quot;;
    align?: &quot;left&quot; | &quot;right&quot; | &quot;center&quot; | &quot;justify&quot; | &quot;initial&quot; | &quot;inherit&quot;;
    children?: React.ReactNode;
  }
  
  interface StyledTextProps {
    $color?: TextProps[&quot;color&quot;];
    $size?: TextProps[&quot;size&quot;];
    $weight?: TextProps[&quot;weight&quot;];
    $display?: TextProps[&quot;display&quot;];
    $align?: TextProps[&quot;align&quot;];
  }
  
  const StyledText = styled.span&lt;StyledTextProps&gt;`
    font-family: var(--default-font-family);
    margin: 0;
    display: ${(props) =&gt; (props.$display ? props.$display : `inherit`)};
    text-align: ${(props) =&gt; (props.$align ? props.$align : `inherit`)};
    font-weight: ${(props) =&gt; (props.$weight ? props.$weight : `normal`)};
  `;
  
  const sizeToHeading: Record&lt;string, string&gt; = {
    &quot;0&quot;: &quot;p&quot;,
    &quot;1&quot;: &quot;h1&quot;,
    &quot;2&quot;: &quot;h2&quot;,
    &quot;3&quot;: &quot;h3&quot;,
    &quot;4&quot;: &quot;h4&quot;,
    &quot;5&quot;: &quot;h5&quot;,
    &quot;6&quot;: &quot;h6&quot;
  };
  
  export const Text = React.forwardRef&lt;HTMLSpanElement, TextProps&gt;(
    ({ ...props }, ref) =&gt; {
      return (
        &lt;&gt;
          &lt;StyledText
            ref={ref}
            $size={props.size || &quot;6&quot;}
            as={props.size ? sizeToHeading[props.size] : &quot;p&quot;}
          &gt;
            {props.children}
          &lt;/StyledText&gt;
        &lt;/&gt;
      );
    }
  );
  
  </code></pre>