<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">Element <code class="notranslate">div</code> not allowed as child of <code class="notranslate">label</code>. See <a href="https://i.imgur.com/XyDTf9A.png" rel="nofollow">https://i.imgur.com/XyDTf9A.png</a>.</p>
<h2 dir="auto">Current Behavior</h2>

<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;label class=&quot;c190&quot;&gt;
  &lt;div class=&quot;c226&quot;&gt;
    &lt;span class=&quot;c54 c45 c232 c234 c229 c235 c230&quot;&gt;
      &lt;span class=&quot;c51&quot;&gt;
        &lt;div class=&quot;c228&quot;&gt;&lt;/div&gt;
        &lt;input type=&quot;checkbox&quot; class=&quot;c233&quot; value=&quot;on&quot; checked=&quot;&quot;&gt;
      &lt;/span&gt;
      &lt;span class=&quot;c57&quot;&gt;&lt;/span&gt;
    &lt;/span&gt;
  &lt;div class=&quot;c227&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;p class=&quot;c64 c73 c192&quot;&gt;A&lt;/p&gt;
&lt;/label&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">class</span>="<span class="pl-s">c190</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">c226</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c54 c45 c232 c234 c229 c235 c230</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c51</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">c228</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>" <span class="pl-c1">class</span>="<span class="pl-s">c233</span>" <span class="pl-c1">value</span>="<span class="pl-s">on</span>" <span class="pl-c1">checked</span>=""<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c57</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">c227</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span> <span class="pl-c1">class</span>="<span class="pl-s">c64 c73 c192</span>"<span class="pl-kos">&gt;</span>A<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Navigate to <a href="https://material-ui-1dab0.firebaseapp.com/demos/selection-controls/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/demos/selection-controls/</a></li>
<li>Inspect the mark-up for labelled Switch</li>
<li>Have that parsed by <a href="https://validator.w3.org" rel="nofollow">https://validator.w3.org</a></li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">This mark-up does not follow the HTML spec: Content model for element label and can cause issues for accessibility.<br>
<a href="http://w3c.github.io/html/single-page.html#the-label-element" rel="nofollow">http://w3c.github.io/html/single-page.html#the-label-element</a><br>
Phrasing content, but with no descendant labelable elements unless it is the element’s labeled control, and no descendant label elements.</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>v1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>v15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>all</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I've got my own material-ui fork in a folder, and I've run <code class="notranslate">npm link</code> so I can link it to a project I'm working on. This works fine, but I'm wondering how I can make changes to material-ui and then quickly test those in my project, without having to relink? I tried <code class="notranslate">npm run build</code> in the material-ui folder, but now I get this error in my project:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'cyan500' of undefined"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'cyan500' of undefined
</code></pre></div>
<p dir="auto">What should my process be?</p>