<p dir="auto">I tried customizing the button colors as I have an "delete account" button which should be colored red instead of primary or accent.</p>
<p dir="auto">I endet up creating a Wrapper around Button which allows passing other colors which then applies other css classes depending on the passed color prop. This works, but is somehow fuzzy as you have to redefine a lot of css for hover and active styles.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">There should be an easy api to customize button colors besides primary and accent. I think it's not to uncommon to have button elements which diverge from primary and accent colors for some special purpose.</p>
<p dir="auto">I'm not sure if this is material design spec conform, but as I get it this <a href="https://material.io/guidelines/style/color.html#" rel="nofollow">https://material.io/guidelines/style/color.html#</a> it doesn't imply that using additional colors is generally forbidden.</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">The font on Desktop should be bigger. There's a bug here on this line:<br>
<a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/Tooltip/Tooltip.js#L49">https://github.com/mui-org/material-ui/blob/v1-beta/src/Tooltip/Tooltip.js#L49</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  tooltip: {
    background: grey[700],
    borderRadius: 2,
    color: common.fullWhite,
    fontFamily: theme.typography.fontFamily,
    fontSize: theme.typography.pxToRem(14),
    minHeight: theme.spacing.unit * 4,
    lineHeight: '32px',
    opacity: 0,
    padding: `0 ${theme.spacing.unit}px`,
    transform: 'scale(0)',
    transition: theme.transitions.create(['opacity', 'transform'], {
      duration: theme.transitions.duration.shortest,
    }),
    [theme.breakpoints.up('sm')]: {
      minHeight: 22,
      lineHeight: '22px',
      padding: `0 ${theme.spacing.unit}px`,
      fontSize: theme.typography.pxToRem(10),
    },
  }"><pre class="notranslate">  tooltip: <span class="pl-kos">{</span>
    <span class="pl-c1">background</span>: <span class="pl-s1">grey</span><span class="pl-kos">[</span><span class="pl-c1">700</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">borderRadius</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
    <span class="pl-c1">color</span>: <span class="pl-s1">common</span><span class="pl-kos">.</span><span class="pl-c1">fullWhite</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontFamily</span>: <span class="pl-s1">theme</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-kos">,</span>
    <span class="pl-c1">fontSize</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-en">pxToRem</span><span class="pl-kos">(</span><span class="pl-c1">14</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">minHeight</span>: <span class="pl-s1">theme</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-c1">*</span> <span class="pl-c1">4</span><span class="pl-kos">,</span>
    <span class="pl-c1">lineHeight</span>: <span class="pl-s">'32px'</span><span class="pl-kos">,</span>
    <span class="pl-c1">opacity</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">padding</span>: <span class="pl-s">`0 <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</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>px`</span><span class="pl-kos">,</span>
    <span class="pl-c1">transform</span>: <span class="pl-s">'scale(0)'</span><span class="pl-kos">,</span>
    <span class="pl-c1">transition</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">transitions</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'opacity'</span><span class="pl-kos">,</span> <span class="pl-s">'transform'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">duration</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">transitions</span><span class="pl-kos">.</span><span class="pl-c1">duration</span><span class="pl-kos">.</span><span class="pl-c1">shortest</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-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">breakpoints</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s">'sm'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">minHeight</span>: <span class="pl-c1">22</span><span class="pl-kos">,</span>
      <span class="pl-c1">lineHeight</span>: <span class="pl-s">'22px'</span><span class="pl-kos">,</span>
      <span class="pl-c1">padding</span>: <span class="pl-s">`0 <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</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>px`</span><span class="pl-kos">,</span>
      <span class="pl-c1">fontSize</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-en">pxToRem</span><span class="pl-kos">(</span><span class="pl-c1">10</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">It seems that media query was designed for mobile but it applies to desktop and larger than mobile screens. line 49 should be</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    [theme.breakpoints.down('sm')]: {"><pre class="notranslate"><code class="notranslate">    [theme.breakpoints.down('sm')]: {
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The font is too small on desktop</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.21</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>All</td>
</tr>
</tbody>
</table>