<p dir="auto">Hello!<br>
I cloned the project fount at: <strong><a href="https://github.com/callemall/material-ui/tree/v1-beta/examples/create-react-app">https://github.com/callemall/material-ui/tree/v1-beta/examples/create-react-app</a></strong> as docs suggest and I also had an error as mentioned in: <strong><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="164676138" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/4664" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/4664/hovercard" href="https://github.com/mui/material-ui/issues/4664">#4664</a></strong></p>
<p dir="auto">Apart this, I tried to change colors to customize them and I had:<br>
<strong>TypeError: undefined is not an object (evaluating 'color.charAt')</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3308721/32325417-30da8380-bfcf-11e7-9d61-fdcadee5ba14.png"><img width="686" alt="captura de tela 2017-11-02 as 13 09 24" src="https://user-images.githubusercontent.com/3308721/32325417-30da8380-bfcf-11e7-9d61-fdcadee5ba14.png" style="max-width: 100%;"></a></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>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Have the colors set correctly"><pre class="notranslate"><code class="notranslate">Have the colors set correctly
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="An error pop-ups with: TypeError: undefined is not an object (evaluating 'color.charAt')"><pre class="notranslate"><code class="notranslate">An error pop-ups with: TypeError: undefined is not an object (evaluating 'color.charAt')
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Please, check out the cloned code from you at: <strong><a href="https://codesandbox.io/s/rr25l6v7rq" rel="nofollow">https://codesandbox.io/s/rr25l6v7rq</a></strong></p>
<p dir="auto">In <em>styles/createContext.js</em> line <strong>9</strong> the color is printed correctly.<br>
However, when placed in the configuration like at line <strong>12</strong> the error happens.<br>
Changing the line <strong>12</strong> from <strong>purple[500]</strong> to <strong>purple</strong> everything works fine.</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/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">I'm trying to follow the material-ui documentation, with the end goal being creating a left anchored permanent Drawer which has ListItem buttons that link to different pages.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The documentation seems <strong>to me</strong> to be incomplete. It fails to describe in any detail how you link the actual ListItems to the Drawer, or even how to create buttons out of ListItems in general. If you look at the Demos for Drawers (<a href="https://material-ui.com/demos/drawers/" rel="nofollow">https://material-ui.com/demos/drawers/</a>), the ListItems are abstracted out to another file which is not shown. This ensures that there's no way to understand how to connect the two.</p>
<p dir="auto">I've searched excessively on how to accomplish this, and have tried numerous variations of my own. Granted, I'm new at this. But I feel the documentation should be there to help. In all honesty, I'm just looking to help solve this issue, so I can move on with my project <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji> but perhaps I can help you guys improve your Docs as well.</p>
<p dir="auto">Thank you!</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</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.20</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>