<p dir="auto">Typscript typings for ChipProps includes tabIndex of type: number | string which is incompartible with the overriding  tabIndex property extended from HTMLElement via HTMLDivElement.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">No error.   Property tabIndex?: number | string on interface ChipProps should either be tabIndex?: number or removed completely since its inherited by virtue of extension.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Receive the error message<br>
<code class="notranslate">ERROR in &lt;path-to-project-root&gt;/node_modules/material-ui/Chip/Chip.d.ts (4,18): error TS2430: Interface 'ChipProps' incorrectly extends interface 'HTMLAttributes&lt;HTMLDivElement&gt;'. Types of property 'tabIndex' are incompatible. Type 'ReactText' is not assignable to type 'number'. Type 'string' is not assignable to type 'number'.</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Add Chip to any typescript project and compile with tsc</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.9</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
</tbody>
</table>
<p dir="auto">When use the Card component and also SSR, React 16 gives the following message:</p>
<blockquote>
<p dir="auto">Did not expect server HTML to contain a &lt;div&gt; in &lt;div&gt;.</p>
</blockquote>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">A Card component should render on the serve side, so the client side doesn't have to do anything with it and should return no warning.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">When I use the Card component with React 16 like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Card className={classes.card}&gt;
    &lt;CardContent&gt;
    &lt;Typography type=&quot;headline&quot; component=&quot;h2&quot; &gt;
          Login
    &lt;/Typography&gt;
    &lt;TextField
      id=&quot;username&quot;
      label=&quot;Username&quot;
      autoComplete=&quot;username&quot;
      className={classes.input}
    /&gt;
    &lt;TextField
      id=&quot;password&quot;
      label=&quot;Password&quot;
      type=&quot;password&quot;
      autoComplete=&quot;current-password&quot;
      margin=&quot;normal&quot;
      className={classes.input}
    /&gt;
  &lt;/CardContent&gt;
  &lt;CardActions className={classes.cardActions}&gt;
      &lt;Button onClick={() =&gt; props.handleLogin()}&gt;Login&lt;/Button&gt;
  &lt;/CardActions&gt;
&lt;/Card&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Card</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">card</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">CardContent</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"headline"</span> <span class="pl-c1">component</span><span class="pl-c1">=</span><span class="pl-s">"h2"</span> <span class="pl-c1">&gt;</span>
          Login
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
      <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"username"</span>
      <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Username"</span>
      <span class="pl-c1">autoComplete</span><span class="pl-c1">=</span><span class="pl-s">"username"</span>
      <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">input</span><span class="pl-kos">}</span>
    <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
      <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"password"</span>
      <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Password"</span>
      <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"password"</span>
      <span class="pl-c1">autoComplete</span><span class="pl-c1">=</span><span class="pl-s">"current-password"</span>
      <span class="pl-c1">margin</span><span class="pl-c1">=</span><span class="pl-s">"normal"</span>
      <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">input</span><span class="pl-kos">}</span>
    <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">CardContent</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">CardActions</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">cardActions</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-en">handleLogin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Login<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">CardActions</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Card</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">it gives the following error on hydration:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Did not expect server HTML to contain a &lt;div&gt; in &lt;div&gt;.

printWarning @ bundle.js:sourcemap:423
warning @ bundle.js:sourcemap:447
warnForDeletedHydratableElement$1 @ bundle.js:sourcemap:16895
didNotHydrateInstance @ bundle.js:sourcemap:17573
deleteHydratableInstance @ bundle.js:sourcemap:11892
popHydrationState @ bundle.js:sourcemap:12099
completeWork @ bundle.js:sourcemap:11067
completeUnitOfWork @ bundle.js:sourcemap:12568
performUnitOfWork @ bundle.js:sourcemap:12670
workLoop @ bundle.js:sourcemap:12724
callCallback @ bundle.js:sourcemap:2978
invokeGuardedCallbackDev @ bundle.js:sourcemap:3017
invokeGuardedCallback @ bundle.js:sourcemap:2874
renderRoot @ bundle.js:sourcemap:12802
performWorkOnRoot @ bundle.js:sourcemap:13450
performWork @ bundle.js:sourcemap:13403
requestWork @ bundle.js:sourcemap:13314
scheduleWorkImpl @ bundle.js:sourcemap:13168
scheduleWork @ bundle.js:sourcemap:13125
scheduleTopLevelUpdate @ bundle.js:sourcemap:13629
updateContainer @ bundle.js:sourcemap:13667
(anonymous) @ bundle.js:sourcemap:17658
unbatchedUpdates @ bundle.js:sourcemap:13538
renderSubtreeIntoContainer @ bundle.js:sourcemap:17657
hydrate @ bundle.js:sourcemap:17719
(anonymous) @ bundle.js:sourcemap:66465"><pre class="notranslate"><code class="notranslate">Warning: Did not expect server HTML to contain a &lt;div&gt; in &lt;div&gt;.

printWarning @ bundle.js:sourcemap:423
warning @ bundle.js:sourcemap:447
warnForDeletedHydratableElement$1 @ bundle.js:sourcemap:16895
didNotHydrateInstance @ bundle.js:sourcemap:17573
deleteHydratableInstance @ bundle.js:sourcemap:11892
popHydrationState @ bundle.js:sourcemap:12099
completeWork @ bundle.js:sourcemap:11067
completeUnitOfWork @ bundle.js:sourcemap:12568
performUnitOfWork @ bundle.js:sourcemap:12670
workLoop @ bundle.js:sourcemap:12724
callCallback @ bundle.js:sourcemap:2978
invokeGuardedCallbackDev @ bundle.js:sourcemap:3017
invokeGuardedCallback @ bundle.js:sourcemap:2874
renderRoot @ bundle.js:sourcemap:12802
performWorkOnRoot @ bundle.js:sourcemap:13450
performWork @ bundle.js:sourcemap:13403
requestWork @ bundle.js:sourcemap:13314
scheduleWorkImpl @ bundle.js:sourcemap:13168
scheduleWork @ bundle.js:sourcemap:13125
scheduleTopLevelUpdate @ bundle.js:sourcemap:13629
updateContainer @ bundle.js:sourcemap:13667
(anonymous) @ bundle.js:sourcemap:17658
unbatchedUpdates @ bundle.js:sourcemap:13538
renderSubtreeIntoContainer @ bundle.js:sourcemap:17657
hydrate @ bundle.js:sourcemap:17719
(anonymous) @ bundle.js:sourcemap:66465
</code></pre></div>
<p dir="auto">The description of the warning does not say much, so I couldn't investigate further. However, when I change the above code to a simple <code class="notranslate">&lt;div&gt;</code> tag, the warning disappears, so I suspect that there is something wrong with the sever-side rendering of the Card component.</p>
<p dir="auto">If there's a way to get more information about the warning I could look into it, I just have no idea how :).</p>
<h2 dir="auto">Context</h2>

<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.25</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome 63.0.3239.108 (Official Build) (64-bit)</td>
</tr>
</tbody>
</table>