<p dir="auto">Currently there are <code class="notranslate">MuiCardHeader</code> and <code class="notranslate">MuiCardContent</code> stylesheets available for overrides, there is not <code class="notranslate">MuiCard</code> though. I need to globally override Card top and bottom margins.</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>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { createMuiTheme } from 'material-ui/styles';

const defaultTheme = createMuiTheme();

export const createTheme = () =&gt; {
  return createMuiTheme({
    overrides: {
      MuiCard {
        root: {
          marginTop: 2 * defaultTheme.spacing.unit,
          marginBottom: 2 * defaultTheme.spacing.unit,
        },
      },
    },
  });
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">createMuiTheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">defaultTheme</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-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">createTheme</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">createMuiTheme</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-v">MuiCard</span> <span class="pl-kos">{</span>
        <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">marginTop</span>: <span class="pl-c1">2</span> <span class="pl-c1">*</span> <span class="pl-s1">defaultTheme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span><span class="pl-kos">,</span>
          <span class="pl-c1">marginBottom</span>: <span class="pl-c1">2</span> <span class="pl-c1">*</span> <span class="pl-s1">defaultTheme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</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>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Currently, this is how I have to do it.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { createMuiTheme } from 'material-ui/styles';

const defaultTheme = createMuiTheme();

export const createTheme = () =&gt; {
  return createMuiTheme({
    overrides: {
      MuiCardHeader: {
        root: {
          marginTop: 2 * defaultTheme.spacing.unit,
        },
      },
      MuiCardContent: {
        root: {
          marginBottom: 2 * defaultTheme.spacing.unit,
        },
      },
    },
  });
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">createMuiTheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">defaultTheme</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-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">createTheme</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">createMuiTheme</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">MuiCardHeader</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">marginTop</span>: <span class="pl-c1">2</span> <span class="pl-c1">*</span> <span class="pl-s1">defaultTheme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</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-c1">MuiCardContent</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">marginBottom</span>: <span class="pl-c1">2</span> <span class="pl-c1">*</span> <span class="pl-s1">defaultTheme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</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>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Btw, pls notice that I use <code class="notranslate">createMuiTheme</code> twice, 1st is to get <code class="notranslate">defaultTheme.spacing.unit</code> to keep everything DRY. Is there any way to get theme defaults without line <code class="notranslate">const defaultTheme = createMuiTheme()</code>? If this is not possible and you think this could be added potentially, I could create a separate issue for this.</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.31</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
</tbody>
</table>
<h2 dir="auto">FontIcon inside an IconButton loose is color from props</h2>
<p dir="auto">In material-ui.alpha.1 when you put a FontIcon with color props inside an IconButton the prop will not work.<br>
I think is related to this commit <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mui/material-ui/commit/a99451a4d6d7f20457cdbd16ea5668080eb72bbf/hovercard" href="https://github.com/mui/material-ui/commit/a99451a4d6d7f20457cdbd16ea5668080eb72bbf"><tt>a99451a</tt></a></p>
<p dir="auto">Before styles was merged like that:<br>
<code class="notranslate">this.mergeStyles({styles.root, style, { color: this.state.hovered ? onColor : offColor })</code></p>
<p dir="auto">And now it is:<br>
<code class="notranslate">Object.assign({styles.root, style})</code></p>
<h2 dir="auto">Versions</h2>
<ul dir="auto">
<li>Material-UI: v0.15.0-alpha.1</li>
<li>React: 0.14.7</li>
<li>Browser: chrome 48.0.2564.116</li>
</ul>