<p dir="auto">[X ] 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.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">FontIcon's onClick method's action should be able to override the hoverColor's reset callback after the click.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When a hoverColor is specified for the fonticon, the method called by it's onClick function, which sets it's color, gets overriden by the old color due to hoverColor's callback.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/r5825125jo" rel="nofollow">https://codesandbox.io/s/r5825125jo</a></p>
<ol dir="auto">
<li>Create a fonticon component within an iconbutton. Don't set a hoverColor.</li>
<li>Define it's onClick function to modify it's color as: <code class="notranslate">onClick={(e)=&gt;{e.target.style = "color:#33FF33 !important";console.log(e.target.style.color)}}</code></li>
<li>Check the console output which will show that the color changed successfully and it is retained.</li>
<li>Repeat 1 and 2 but this time with a hoverColor mentioned.</li>
<li>Even after the click, when there is no hover, the color goes back to the predefined color. Same can be seen in the console with <code class="notranslate">console.log(document.getElementByID('icon_id').style.color);</code></li>
<li>Tried it with <code class="notranslate">e.target.style.color='#33FF33'</code> earlier which too didn't work.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to implement the Favorite/Like button which should turn red on hover and  should stay red after being clicked. However it goes back to being black if there is no hover, even after being clicked.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">| Tech         || etc          |         | Version |<br>
|--------------|---------|<br>
| Material-UI  | 0.19.4 |<br>
| React        | 16.1.1 |<br>
| browser      | 62.0.3202.94 (Official Build) (64-bit) |</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">The <code class="notranslate">className</code> prop can be overridden by other tools or the user (eg. Styled Components).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The <code class="notranslate">className</code> prop can not be overridden when the Drawer is of the type <code class="notranslate">temporary</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Provide a Drawer component of the type <code class="notranslate">temporary</code> a <code class="notranslate">className</code> prop.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I tried to override material-ui styles of the Drawer component with a Styled Component.</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.6</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
</tbody>
</table>