<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="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;TextField
     select
     SelectProps={{ autoWidth: true }}
&gt;
   &lt;MenuItem value=&quot;&quot;&gt;&lt;em&gt;None&lt;/em&gt;&lt;/MenuItem&gt;
   &lt;MenuItem value={10}&gt;Short&lt;/MenuItem&gt;
   &lt;MenuItem value={20}&gt;A bit longer&lt;/MenuItem&gt;
   &lt;MenuItem value={30}&gt;Very, very, very long&lt;/MenuItem&gt;
&lt;/TextField&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
     <span class="pl-c1">select</span>
     <span class="pl-c1">SelectProps</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">autoWidth</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-c1">&gt;</span>
   <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">""</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">em</span><span class="pl-c1">&gt;</span>None<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">em</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MenuItem</span><span class="pl-c1">&gt;</span>
   <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">10</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Short<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MenuItem</span><span class="pl-c1">&gt;</span>
   <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">20</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>A bit longer<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MenuItem</span><span class="pl-c1">&gt;</span>
   <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">30</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Very, very, very long<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MenuItem</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TextField</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Should display a long textField, as long as the "Very, very, very long" option.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/99944/31844341-4ff6cdf4-b5f8-11e7-955e-e67cca9a51f5.png"><img src="https://user-images.githubusercontent.com/99944/31844341-4ff6cdf4-b5f8-11e7-955e-e67cca9a51f5.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The TextField is very short, it uses the width of the selected option. When nothing is selected, it is just not usable.</p>
<p dir="auto">Besides, having the width of the field change according to the selected element is disturbing.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/mj7zw8plx8" rel="nofollow">https://codesandbox.io/s/mj7zw8plx8</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm trying to migrate admin-on-rest to material-ui 1.0</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.17</td>
</tr>
<tr>
<td>React</td>
<td>15.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Setting <code class="notranslate">palette.types.light.background.default</code> and <code class="notranslate">palette.types.dark.background.default</code> has no effect on background colors.</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">Setting these palette values should change background colors appropriately.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The supplied background color values are ignored. Background color toggles only between <code class="notranslate">#fafafa<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #fafafa; height: 8px; width: 8px;"></span></code> and <code class="notranslate">#303030<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #303030; height: 8px; width: 8px;"></span></code> - the default values.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Create custom theme:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const palette = {
    types: {
        dark: {
            background: {
                default: &quot;#000000&quot;
            }
        },
        light: {
            background: {
                default: &quot;#ffffff&quot;
            }
        }
    }
};

const theme = createMuiTheme({ palette });"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">palette</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">types</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">dark</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">background</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">default</span>: <span class="pl-s">"#000000"</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">light</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">background</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">default</span>: <span class="pl-s">"#ffffff"</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">theme</span> <span class="pl-c1">=</span> <span class="pl-en">createMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">{</span> palette <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Use this theme to set body background:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = theme =&gt; ({
    '@global': {
        ...
        body: {
            background: theme.palette.background.default,
            ...
        }
    }
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">styles</span> <span class="pl-c1">=</span> <span class="pl-s1">theme</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-s">'@global'</span>: <span class="pl-kos">{</span>
        ...
        <span class="pl-s1">body</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">background</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">background</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">,</span>
            ...
        <span class="pl-kos">}</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">This will have no effect on the body background because the palette values are ignored. Background color can only toggle between <code class="notranslate">#fafafa<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #fafafa; height: 8px; width: 8px;"></span></code> and <code class="notranslate">#303030<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #303030; height: 8px; width: 8px;"></span></code> based on the value of <code class="notranslate">theme.palette.type</code>.</p>
<p dir="auto">I am currently using the following workaround, but this seems completely unnecessary:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = theme =&gt; ({
    '@global': {
        ...
        body: {
            background: (theme.palette.type === 'light')
                ? theme.palette.types.light.background.default
                : theme.palette.types.dark.background.default,
            ...
        }
    }
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">styles</span> <span class="pl-c1">=</span> <span class="pl-s1">theme</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-s">'@global'</span>: <span class="pl-kos">{</span>
        ...
        <span class="pl-s1">body</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">background</span>: <span class="pl-kos">(</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">'light'</span><span class="pl-kos">)</span>
                ? <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">types</span><span class="pl-kos">.</span><span class="pl-c1">light</span><span class="pl-kos">.</span><span class="pl-c1">background</span><span class="pl-kos">.</span><span class="pl-c1">default</span>
                : <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">types</span><span class="pl-kos">.</span><span class="pl-c1">dark</span><span class="pl-kos">.</span><span class="pl-c1">background</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">,</span>
            ...
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>

<p dir="auto">The reason I want to change the default background colors is to be able to embed the react app in an iframe. The hosting page has a white background and the default of <code class="notranslate">#fafafa<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #fafafa; height: 8px; width: 8px;"></span></code> is clashing with it.</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.28</td>
</tr>
<tr>
<td>React</td>
<td>16.x</td>
</tr>
<tr>
<td>browser</td>
<td>N/A</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>