<p dir="auto">In v1, I've set my MuiTheme like so</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const theme = createMuiTheme({
  typography: {
    fontFamily: 'Montserrat',
    fontSize: '5rem'
  },
  palette: {
    primary: lightBlue,
    secondary: amber
  },
  overrides: {
    MuiAppBar: {
      // Name of the styleSheet
      root: {
        // Name of the rule
        boxShadow: 'none',
      },
    },
  },
});"><pre class="notranslate"><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>
  <span class="pl-c1">typography</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">fontFamily</span>: <span class="pl-s">'Montserrat'</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontSize</span>: <span class="pl-s">'5rem'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">palette</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">primary</span>: <span class="pl-s1">lightBlue</span><span class="pl-kos">,</span>
    <span class="pl-c1">secondary</span>: <span class="pl-s1">amber</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">overrides</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">MuiAppBar</span>: <span class="pl-kos">{</span>
      <span class="pl-c">// Name of the styleSheet</span>
      <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
        <span class="pl-c">// Name of the rule</span>
        <span class="pl-c1">boxShadow</span>: <span class="pl-s">'none'</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><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">However, by default, all the text in buttons, AppBars, etc are black, whereas I'd like them to be white, in order to overlay the amber. How do I set the default "contrast color" to be white?</p>
<p dir="auto">I've tried to set the <code class="notranslate">contrastDefaultColor</code> in the primary and secondary fields to "light", and I've tried making the <code class="notranslate">type</code> of the palette "dark," but neither worked. Please advise.</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>
<p dir="auto">render options properly</p>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Cannot read property 'props' of null
TypeError: Cannot read property 'props' of null"><pre class="notranslate"><code class="notranslate">Cannot read property 'props' of null
TypeError: Cannot read property 'props' of null
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const arr = [&quot;2&quot;, &quot;3&quot;, &quot;4&quot;];
const arr2 = undefined;
return (
	&lt;FormControl component=&quot;fieldset&quot; required&gt;
		&lt;FormLabel component=&quot;legend&quot;&gt;Gender&lt;/FormLabel&gt;
			&lt;RadioGroup
				aria-label=&quot;gender&quot;
				name=&quot;gender&quot;
				value=&quot;2&quot;
				onChange={stub}
			&gt;
                       {arr2 &amp;&amp; arr2.map(v =&gt; &lt;FormControlLabel key={v} value={v} control={&lt;Radio /&gt;} label={v} /&gt;)}
			{arr &amp;&amp; arr.map(v =&gt; &lt;FormControlLabel key={v} value={v} control={&lt;Radio /&gt;} label={v} /&gt;)}
		&lt;/RadioGroup&gt;
	&lt;/FormControl&gt;
)"><pre class="notranslate"><code class="notranslate">const arr = ["2", "3", "4"];
const arr2 = undefined;
return (
	&lt;FormControl component="fieldset" required&gt;
		&lt;FormLabel component="legend"&gt;Gender&lt;/FormLabel&gt;
			&lt;RadioGroup
				aria-label="gender"
				name="gender"
				value="2"
				onChange={stub}
			&gt;
                       {arr2 &amp;&amp; arr2.map(v =&gt; &lt;FormControlLabel key={v} value={v} control={&lt;Radio /&gt;} label={v} /&gt;)}
			{arr &amp;&amp; arr.map(v =&gt; &lt;FormControlLabel key={v} value={v} control={&lt;Radio /&gt;} label={v} /&gt;)}
		&lt;/RadioGroup&gt;
	&lt;/FormControl&gt;
)
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">In our app we sometimes have the case that a radio get's options from multiple places and instead of pre merging them I tried to map over them one by one</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="source1 &amp;&amp; source1.map(o =&gt; &lt;option /&gt;)
source2 &amp;&amp; source2.map(o =&gt; &lt;option /&gt;)
&lt;defaultOption /&gt;"><pre class="notranslate"><code class="notranslate">source1 &amp;&amp; source1.map(o =&gt; &lt;option /&gt;)
source2 &amp;&amp; source2.map(o =&gt; &lt;option /&gt;)
&lt;defaultOption /&gt;
</code></pre></div>
<p dir="auto">I think this is somehow related to: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="139117499" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3627" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3627/hovercard?comment_id=217655489&amp;comment_type=issue_comment" href="https://github.com/mui/material-ui/pull/3627#issuecomment-217655489">#3627 (comment)</a> , but I don't fully understand how this works - how is it even possible that <code class="notranslate">{source1 &amp;&amp; ...}</code> generates a problem when source1 is undefined/false or empty?</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>beta.9</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
</tbody>
</table>