<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 Errors</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Throw Error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type '{ component?: string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;; container?: boo...' is not assignable to type 'IntrinsicAttributes &amp; PaperProps &amp; { children?: ReactNode; }'.
  Type '{ component?: string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;; container?: boo...' is not assignable to type 'PaperProps'.
    Types of property 'component' are incompatible.
      Type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
        Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
          Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'StatelessComponent&lt;PaperProps&gt;'.
            Types of property 'propTypes' are incompatible.
              Type 'ValidationMap&lt;GridProps&gt;' is not assignable to type 'ValidationMap&lt;PaperProps&gt;'.
                Types of property 'component' are incompatible.
                  Type '(object: GridProps, key: string, componentName: string, ...rest: any[]) =&gt; Error' is not assignable to type '(object: PaperProps, key: string, componentName: string, ...rest: any[]) =&gt; Error'.
                    Types of parameters 'object' and 'object' are incompatible.
                      Type 'PaperProps' is not assignable to type 'GridProps'.
                        Types of property 'component' are incompatible.
                          Type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;' is not assignable to type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;'.
                            Type 'ComponentClass&lt;PaperProps&gt;' is not assignable to type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;'.
                              Type 'ComponentClass&lt;PaperProps&gt;' is not assignable to type 'StatelessComponent&lt;GridProps&gt;'.
                                Types of property 'propTypes' are incompatible.
                                  Type 'ValidationMap&lt;PaperProps&gt;' is not assignable to type 'ValidationMap&lt;GridProps&gt;'.
                                    Types of property 'component' are incompatible.
                                      Type '(object: PaperProps, key: string, componentName: string, ...rest: any[]) =&gt; Error' is not assignable to type '(object: GridProps, key: string, componentName: string, ...rest: any[]) =&gt; Error'.
                                        Types of parameters 'object' and 'object' are incompatible.
                                          Type 'GridProps' is not assignable to type 'PaperProps'.
                                            Types of property 'component' are incompatible.
                                              Type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
                                                Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
                                                  Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'StatelessComponent&lt;PaperProps&gt;'."><pre class="notranslate"><code class="notranslate">Type '{ component?: string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;; container?: boo...' is not assignable to type 'IntrinsicAttributes &amp; PaperProps &amp; { children?: ReactNode; }'.
  Type '{ component?: string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;; container?: boo...' is not assignable to type 'PaperProps'.
    Types of property 'component' are incompatible.
      Type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
        Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
          Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'StatelessComponent&lt;PaperProps&gt;'.
            Types of property 'propTypes' are incompatible.
              Type 'ValidationMap&lt;GridProps&gt;' is not assignable to type 'ValidationMap&lt;PaperProps&gt;'.
                Types of property 'component' are incompatible.
                  Type '(object: GridProps, key: string, componentName: string, ...rest: any[]) =&gt; Error' is not assignable to type '(object: PaperProps, key: string, componentName: string, ...rest: any[]) =&gt; Error'.
                    Types of parameters 'object' and 'object' are incompatible.
                      Type 'PaperProps' is not assignable to type 'GridProps'.
                        Types of property 'component' are incompatible.
                          Type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;' is not assignable to type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;'.
                            Type 'ComponentClass&lt;PaperProps&gt;' is not assignable to type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;'.
                              Type 'ComponentClass&lt;PaperProps&gt;' is not assignable to type 'StatelessComponent&lt;GridProps&gt;'.
                                Types of property 'propTypes' are incompatible.
                                  Type 'ValidationMap&lt;PaperProps&gt;' is not assignable to type 'ValidationMap&lt;GridProps&gt;'.
                                    Types of property 'component' are incompatible.
                                      Type '(object: PaperProps, key: string, componentName: string, ...rest: any[]) =&gt; Error' is not assignable to type '(object: GridProps, key: string, componentName: string, ...rest: any[]) =&gt; Error'.
                                        Types of parameters 'object' and 'object' are incompatible.
                                          Type 'GridProps' is not assignable to type 'PaperProps'.
                                            Types of property 'component' are incompatible.
                                              Type 'string | ComponentClass&lt;GridProps&gt; | StatelessComponent&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
                                                Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'string | ComponentClass&lt;PaperProps&gt; | StatelessComponent&lt;PaperProps&gt;'.
                                                  Type 'ComponentClass&lt;GridProps&gt;' is not assignable to type 'StatelessComponent&lt;PaperProps&gt;'.
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';

interface IHomeProps {}

export default class Home extends React.Component&lt;IHomeProps&gt; {
    public render() {
        return (
            &lt;Grid component={props =&gt; &lt;Paper {...props} /&gt;}&gt;
                &lt;div&gt;hello&lt;/div&gt;
            &lt;/Grid&gt;
        );
    }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">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-smi">Grid</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/Grid'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Paper</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/Paper'</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">IHomeProps</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-smi">Home</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">IHomeProps</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">public</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-smi">Grid</span> <span class="pl-smi">component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-smi">Paper</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-s1">hello</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>div&gt;</span><span class="pl-c1"></span>
            <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>Grid&gt;</span><span class="pl-c1"></span>
        <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">same issue with</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Grid component={Paper}&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-smi">Grid</span> <span class="pl-smi">component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">Paper</span><span class="pl-kos">}</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>v1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>Typescript</td>
<td>2.6.1</td>
</tr>
</tbody>
</table>
<p dir="auto">In the Docs for <code class="notranslate">Style &gt; Color</code> the display of the actual Color Palette has three (potential) updates:</p>
<ol dir="auto">
<li>The font is the browser default (should be according to the <code class="notranslate">theme</code>)</li>
<li>The weight should be <code class="notranslate">500</code> (to match <code class="notranslate">material.io</code>)</li>
<li>Color names should have capitalization and spaces in their display (while maintaining the need to lowerCase and remove spaces for theme purposes).</li>
</ol>


<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"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3099369/31099246-58a61fe0-a793-11e7-9be7-d9a5f23085ba.png"><img src="https://user-images.githubusercontent.com/3099369/31099246-58a61fe0-a793-11e7-9be7-d9a5f23085ba.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3099369/31099281-7498a77c-a793-11e7-830e-0654c53838c8.png"><img src="https://user-images.githubusercontent.com/3099369/31099281-7498a77c-a793-11e7-830e-0654c53838c8.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">N/A</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.13</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>