<ul dir="auto">
<li>[ x] 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">I'm rendering a pretty long component within the dialog, and am using the autoscroll functionality to get the <code class="notranslate">overflow-y: auto</code> styling in the dialog content.  At certain points, the component moves to the the next step, and I would like to instantly go to the top of the dialog content.</p>
<p dir="auto">I saw that jQuery's scrollTop function can be used to get to the top of a component, but I'm unsure how to reference the dialogContent div. Please advise.</p>

<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Currently, when the component changes, the scroll remains the same, and the result is that the user sees a lower part of the new component.</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>0.17.4</td>
</tr>
<tr>
<td>React</td>
<td>15.3.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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>

<p dir="auto">I'm currently trying to create a custom Tab component by overwriting classes according to the guide in <a href="https://material-ui.com/customization/overrides/" rel="nofollow">https://material-ui.com/customization/overrides/</a>. However, I stumbled across a problem with overwriting the Tab styles. When I overwrite the styles the app crashes when the Tab is about to be rendered with</p>
<blockquote>
<p dir="auto">TypeError: Cannot read property 'charAt' of undefined<br>
Warning: Material-UI: capitalizeFirstLetter(string) expects a string argument.</p>
</blockquote>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7314829/34492861-af12e266-efe9-11e7-9bc8-635e5df4401a.png"><img src="https://user-images.githubusercontent.com/7314829/34492861-af12e266-efe9-11e7-9bc8-635e5df4401a.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The error is thrown in the helper, but the root of the TypeError lies in the Tab component, due to <code class="notranslate">textColor</code> being undefined, when a custom styling is applied:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7314829/34492775-6fd3528e-efe9-11e7-99ac-3bd8725381cb.png"><img src="https://user-images.githubusercontent.com/7314829/34492775-6fd3528e-efe9-11e7-99ac-3bd8725381cb.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">If I provide <code class="notranslate">textColor</code> myself the app does not crash.</p>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I actually would not expect to need to provide the <code class="notranslate">textColor</code> prop myself. Otherwise that should be probably mentioned in the documentation.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">I need to provide a <code class="notranslate">textColor</code> prop to the Tab in order not to crash the app.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I apply my styling as follows:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { Tab as MaterialTab, TabProps } from 'material-ui/Tabs';
import { withStyles, Theme } from 'material-ui/styles';
import { WithStyles } from 'material-ui/styles/withStyles';

const Tab: React.SFC&lt;TabProps &amp; WithStyles&lt;'root'&gt;&gt; = props =&gt; {
  return (
    &lt;MaterialTab label={props.label} classes={{ root: props.classes.root }} /&gt;
  );
};

const styles = (theme: Theme) =&gt; ({
  root: {
    height: 60,
  },
});

export default withStyles(styles)(Tab);
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Tab</span> <span class="pl-k">as</span> <span class="pl-v">MaterialTab</span><span class="pl-kos">,</span> <span class="pl-v">TabProps</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/Tabs'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withStyles</span><span class="pl-kos">,</span> <span class="pl-v">Theme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">WithStyles</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles/withStyles'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">Tab</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">SFC</span><span class="pl-c1">&lt;</span><span class="pl-v">TabProps</span> <span class="pl-c1">&amp;</span> <span class="pl-v">WithStyles</span><span class="pl-c1">&lt;</span>'<span class="pl-s1">root</span><span class="pl-kos"></span>'&gt;&gt; = props =&gt; {
  return (
    &lt;MaterialTab label={props.label} classes={{ root: props.classes.root }} /&gt;
  );
};

const styles = (theme: Theme) =&gt; ({
  root: {
    height: 60,
  },
});

export default withStyles(styles)(Tab);</pre></div>
<p dir="auto">And use my custom component inside an uncostumized Tabs component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Tabs
  value={this.state.value}
  onChange={this.handleChange}
  indicatorColor=&quot;primary&quot;
  textColor=&quot;primary&quot;
&gt;
  &lt;Tab label=&quot;Settings&quot; /&gt;
  &lt;Tab label=&quot;Sensors&quot; /&gt;
&lt;/Tabs&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Tabs</span>
  <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">}</span>
  <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleChange</span><span class="pl-kos">}</span>
  <span class="pl-c1">indicatorColor</span><span class="pl-c1">=</span><span class="pl-s">"primary"</span>
  <span class="pl-c1">textColor</span><span class="pl-c1">=</span><span class="pl-s">"primary"</span>
<span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Tab</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Settings"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Tab</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Sensors"</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">Tabs</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">As mentioned: if I supply the textColor prop the building works (even though the functionality seems to be broken, but that's probably another thing).</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    &lt;MaterialTab
      label={props.label}
      classes={{ root: props.classes.root }}
      textColor=&quot;primary&quot;
    /&gt;"><pre class="notranslate">    <span class="pl-c1">&lt;</span><span class="pl-ent">MaterialTab</span>
      <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">label</span><span class="pl-kos">}</span>
      <span class="pl-c1">classes</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">root</span>: <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-c1">root</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
      <span class="pl-c1">textColor</span><span class="pl-c1">=</span><span class="pl-s">"primary"</span>
    <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>

<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>material-ui@1.0.0-beta.26</td>
</tr>
<tr>
<td>React</td>
<td>react@^16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 63</td>
</tr>
<tr>
<td>etc</td>
<td>typescript@~2.6.2</td>
</tr>
</tbody>
</table>