<ul dir="auto">
<li>[ x] 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="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="The radio button and checkbox should not blink by default. Once selected then they should have there selected animation. Right now as soon as I render the Checkbox &amp; Radio button this is what happens. Kindly have a look at this image"><pre class="notranslate"><code class="notranslate">The radio button and checkbox should not blink by default. Once selected then they should have there selected animation. Right now as soon as I render the Checkbox &amp; Radio button this is what happens. Kindly have a look at this image
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16651811/32547035-b7f42bb4-c4a2-11e7-8f3c-224a3dba5f78.gif"><img src="https://user-images.githubusercontent.com/16651811/32547035-b7f42bb4-c4a2-11e7-8f3c-224a3dba5f78.gif" alt="error" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">As you can see in the image above the checkbox and radio button keep on blinking</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">My codebase is as follows</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Material UI Components
import Radio, { RadioGroup } from 'material-ui/Radio';
import Checkbox from 'material-ui/Checkbox';
import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form';
.
.
.
&lt;FormControl component=&quot;fieldset&quot; required&gt;
        {/* &lt;FormLabel&gt;{name}&lt;/FormLabel&gt; */}
        &lt;RadioGroup
          aria-label=&quot;radio-selection&quot;
          name={name}
          onChange={this.onHandleChange}
          value={this.state.selectedValue}
        &gt;
          {listOfValues.map((item, index) =&gt; (
            &lt;FormControlLabel key={index} value={item} control={&lt;Radio /&gt;} label={item} /&gt;
          ))}
        &lt;/RadioGroup&gt;
&lt;/FormControl&gt;

&lt;FormGroup&gt;
        {/*&lt;h4 className=&quot;text-capitalize&quot;&gt;{name ? name : 'Checklist'}&lt;/h4&gt;*/}
        {listOfValues.map((item, i) =&gt; (
          &lt;FormControlLabel
            key={i}
            control={&lt;Checkbox value={item} /&gt;}
            onChange={(event, isInputChecked) =&gt; { this.onHandle(isInputChecked, item) }}
            checked={selectedValues.includes(item)}
            label={item}
          /&gt;
        ))}
&lt;/FormGroup&gt;"><pre class="notranslate"><code class="notranslate">// Material UI Components
import Radio, { RadioGroup } from 'material-ui/Radio';
import Checkbox from 'material-ui/Checkbox';
import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form';
.
.
.
&lt;FormControl component="fieldset" required&gt;
        {/* &lt;FormLabel&gt;{name}&lt;/FormLabel&gt; */}
        &lt;RadioGroup
          aria-label="radio-selection"
          name={name}
          onChange={this.onHandleChange}
          value={this.state.selectedValue}
        &gt;
          {listOfValues.map((item, index) =&gt; (
            &lt;FormControlLabel key={index} value={item} control={&lt;Radio /&gt;} label={item} /&gt;
          ))}
        &lt;/RadioGroup&gt;
&lt;/FormControl&gt;

&lt;FormGroup&gt;
        {/*&lt;h4 className="text-capitalize"&gt;{name ? name : 'Checklist'}&lt;/h4&gt;*/}
        {listOfValues.map((item, i) =&gt; (
          &lt;FormControlLabel
            key={i}
            control={&lt;Checkbox value={item} /&gt;}
            onChange={(event, isInputChecked) =&gt; { this.onHandle(isInputChecked, item) }}
            checked={selectedValues.includes(item)}
            label={item}
          /&gt;
        ))}
&lt;/FormGroup&gt;
</code></pre></div>
<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>alpha20</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>not using</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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">I'm trying to override the element of Expansion Panel that contains these classes:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="MuiCollapse-container-44 MuiCollapse-entered-45"><pre class="notranslate"><code class="notranslate">MuiCollapse-container-44 MuiCollapse-entered-45
</code></pre></div>
<p dir="auto">I.e. seem to be using the Collapse component?</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">No API to change the part that uses Collapse</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">The components below (that are part of Expansion Panel) all work fine to override CSS with. Collapse is not listed, so I guess this is not a bug - more a missing feature?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ExpansionPanel /&gt;
&lt;ExpansionPanelActions /&gt;
&lt;ExpansionPanelDetails /&gt;
&lt;ExpansionPanelSummary /&gt;"><pre class="notranslate"><code class="notranslate">&lt;ExpansionPanel /&gt;
&lt;ExpansionPanelActions /&gt;
&lt;ExpansionPanelDetails /&gt;
&lt;ExpansionPanelSummary /&gt;
</code></pre></div>