title: How to avoid clashes with HTML attributes without changing the prop name?
body: <p>Using styled components and TypeScript, I'd like to define a component that has a prop with the same name as an existing HTML attribute, but a different type.</p>
  <p>For example:</p>
  <pre class="lang-tsx prettyprint-override"><code>import { Color } from &quot;color&quot;;
  import styled from &quot;styled-components&quot;;
  
  export interface BackgroundProps {
    color: Color;
  }
  
  export const Background = styled.div&lt;BackgroundProps&gt;`
    background-color: ${({ color }) =&gt; color.hex()};
  `;
  </code></pre>
  <p>This declaration works just fine, but the usage cannot be compiled, because the <code>color</code> prop can never satisfy the type <code>Color &amp; string</code> that is declared internally by styled components.</p>
  <pre class="lang-tsx prettyprint-override"><code>&lt;Background color={new Color(&quot;red&quot;)} /&gt;
  //                 ^^^^^^^^^^^^^^^^ &quot;Does not satisfy constraint Color &amp; string&quot;
  
  &lt;Background color=&quot;red&quot; /&gt;
  //                 ^^^ &quot;Does not satisfy constraint Color &amp; string&quot;
  </code></pre>
  <p>Styled components arrives at this declaration for the <code>color</code> prop because it merges <code>BackgroundProps &amp; HTMLDivAttributes</code> and <code>HTMLDivAttributes</code> contains <code>color?: string</code>.</p>
  <p>I know I could just rename the prop to something that doesn't clash, such as <code>colorInstance</code> or <code>$color</code>, but I would prefer to keep the name <code>color</code> and override the type from <code>HTMLDivAttributes</code> instead.</p>
  <p>If we had more access to the styled components declarations, I might be able to use <code>Omit&lt;HTMLDivAttributes, &quot;color&quot;&gt;</code> somewhere, but I haven't found a way to do so.</p>
  <p>Does anyone know if there's a decent way to achieve this?</p>