<p dir="auto">I am trying to override Grid class names injected by Material-UI, I use the following prop</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Grid
    container
    spacing={24}
    classes={{ 'spacing-xs-24': classes.myspacing }}
&gt;"><pre class="notranslate"><code class="notranslate">&lt;Grid
    container
    spacing={24}
    classes={{ 'spacing-xs-24': classes.myspacing }}
&gt;
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const styles = {
  myspacing: {
    
    // The below nest style is NOT WORKING
    '&amp; &gt; $typeItem': {
      padding: 0,
    },

    padding: 0,
  }
}"><pre class="notranslate"><code class="notranslate">const styles = {
  myspacing: {
    
    // The below nest style is NOT WORKING
    '&amp; &gt; $typeItem': {
      padding: 0,
    },

    padding: 0,
  }
}
</code></pre></div>

<ul dir="auto">
<li>[ 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.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">After overriding, I want the grid items have following style</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".MuiGrid-spacing-xs-24-1120 &gt; .MuiGrid-typeItem-1098 {
    padding: 0px;
}"><pre class="notranslate"><code class="notranslate">.MuiGrid-spacing-xs-24-1120 &gt; .MuiGrid-typeItem-1098 {
    padding: 0px;
}
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">But it seems doesn't work, The devtool still shows the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".MuiGrid-spacing-xs-24-1120 &gt; .MuiGrid-typeItem-1098 {
     padding: 12px;
}"><pre class="notranslate"><code class="notranslate">.MuiGrid-spacing-xs-24-1120 &gt; .MuiGrid-typeItem-1098 {
     padding: 12px;
}
</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>beta 30</td>
</tr>
<tr>
<td>React</td>
<td>v16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 61</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/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">Not relevant</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Not relevant</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Not relevant</p>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I am using <code class="notranslate">material-ui@next</code> with Typescript. Unfortunately, the project has sparse information on usage with Typescript especially with <code class="notranslate">withStyles</code>. Though <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="263799945" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8598" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8598/hovercard" href="https://github.com/mui/material-ui/issues/8598">#8598</a> promises a guide on Typescript, meanwhile I have been using <a href="https://github.com/callemall/material-ui/blob/v1-beta/test/typescript/styles.spec.tsx">styles typescript unit tests</a> to learn <code class="notranslate">withStyles</code> usage.</p>
<p dir="auto">Taking cue from the <a href="https://github.com/callemall/material-ui/blob/v1-beta/test/typescript/styles.spec.tsx#L35-L41">example 2 in unit test</a> I coded a component this way,</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const TopBarComponent: React.SFC&lt;Props &amp; WithStyles&lt;ComponentClassNames&gt;&gt; = ({
  title,
  leftButton,
  uiStore,
  classes
}) =&gt; (
    &lt;AppBar position=&quot;static&quot;&gt;
      &lt;Toolbar&gt;
        &lt;IconButton color=&quot;contrast&quot;&gt;
          &lt;HomeIcon /&gt;
        &lt;/IconButton&gt;
        &lt;Typography type=&quot;title&quot; color=&quot;inherit&quot; className={classes!.flex}&gt;
          {title}
        &lt;/Typography&gt;
        &lt;Button color=&quot;contrast&quot; onClick={uiStore.topBarLeftButtonClicked}&gt;
          {getButtonLabel(leftButton)}
        &lt;/Button&gt;
      &lt;/Toolbar&gt;
    &lt;/AppBar&gt;
  );

const TopBar = withStyles(styles)(TopBarComponent); // (A)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">TopBarComponent</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">SFC</span><span class="pl-c1">&lt;</span><span class="pl-v">Props</span> <span class="pl-c1">&amp;</span> <span class="pl-v">WithStyles</span><span class="pl-c1">&lt;</span><span class="pl-ent">ComponentClassNames</span><span class="pl-c1">&gt;</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  title<span class="pl-kos">,</span>
  leftButton<span class="pl-kos">,</span>
  uiStore<span class="pl-kos">,</span>
  classes
<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">AppBar</span> <span class="pl-c1">position</span><span class="pl-c1">=</span><span class="pl-s">"static"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Toolbar</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"contrast"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">HomeIcon</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"title"</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"inherit"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-c1">!</span><span class="pl-kos">.</span><span class="pl-c1">flex</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-s1">title</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Button</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"contrast"</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">uiStore</span><span class="pl-kos">.</span><span class="pl-c1">topBarLeftButtonClicked</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-en">getButtonLabel</span><span class="pl-kos">(</span><span class="pl-s1">leftButton</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Toolbar</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">AppBar</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">TopBar</span> <span class="pl-c1">=</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">TopBarComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// (A)</span></pre></div>
<p dir="auto">which gave me this error</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="error TS2322: Type '{ title: &quot;Page not found&quot;; leftButton: ButtonAction.SignIn; uiStore: UIStore; }' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;Props &amp; WithStyles&lt;&quot;flex&quot;&gt; &amp; StyledCompo...'.
  Type '{ title: &quot;Page not found&quot;; leftButton: ButtonAction.SignIn; uiStore: UIStore; }' is not assignable to type 'Readonly&lt;Props &amp; WithStyles&lt;&quot;flex&quot;&gt; &amp; StyledComponentProps&lt;string&gt;&gt;'.
    Property 'classes' is missing in type '{ title: &quot;Page not found&quot;; leftButton: ButtonAction.SignIn; uiStore: UIStore; }'."><pre class="notranslate">error TS2322: Type <span class="pl-s"><span class="pl-pds">'</span>{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;Props &amp; WithStyles&lt;"flex"&gt; &amp; StyledCompo...<span class="pl-pds">'</span></span>.
  Type <span class="pl-s"><span class="pl-pds">'</span>{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>Readonly&lt;Props &amp; WithStyles&lt;"flex"&gt; &amp; StyledComponentProps&lt;string&gt;&gt;<span class="pl-pds">'</span></span>.
    Property <span class="pl-s"><span class="pl-pds">'</span>classes<span class="pl-pds">'</span></span> is missing <span class="pl-k">in</span> <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }<span class="pl-pds">'</span></span>.</pre></div>
<p dir="auto">After wasting a lot of time, these posts by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pelotom/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pelotom">@pelotom</a>  provided the hint,</p>
<ol dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="264215974" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8635" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8635/hovercard?comment_id=335565529&amp;comment_type=issue_comment" href="https://github.com/mui/material-ui/issues/8635#issuecomment-335565529">#8635 (comment)</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="261435596" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8447" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8447/hovercard?comment_id=335564192&amp;comment_type=issue_comment" href="https://github.com/mui/material-ui/issues/8447#issuecomment-335564192">#8447 (comment)</a></li>
</ol>
<p dir="auto">I changed my line (A) to</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const TopBar = withStyles(styles)&lt;Props&gt;(TopBarComponent);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">TopBar</span> <span class="pl-c1">=</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-c1">&lt;</span><span class="pl-v">Props</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-v">TopBarComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This fixed the TS error.</p>
<p dir="auto">Now, I don't have enough experience in Typescript to understand why unit tests does not need to pass props type. But could you please update the unit tests now and keep it updated in the future such that it shows how to handle all sorts of usage. I mean, if unit tests had the example this way</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Example 2
const Component: React.SFC&lt;
  ComponentProps &amp; WithStyles&lt;ComponentClassNames&gt;
&gt; = ({ classes, text }) =&gt; &lt;div className={classes.root}&gt;{text}&lt;/div&gt;;

const StyledExampleTwo = withStyles(styles)&lt;ComponentProps&gt;(Component);  // ---&gt; This line
&lt;StyledExampleTwo text=&quot;I am styled!&quot; /&gt;;"><pre class="notranslate"><span class="pl-c">// Example 2</span>
<span class="pl-k">const</span> <span class="pl-v">Component</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">SFC</span><span class="pl-c1">&lt;</span>
  <span class="pl-v">ComponentProps</span> <span class="pl-c1">&amp;</span> <span class="pl-v">WithStyles</span><span class="pl-kos"></span><span class="pl-c1">&lt;</span><span class="pl-ent">ComponentClassNames</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-s1">classes</span><span class="pl-kos">,</span> <span class="pl-s1">text</span> <span class="pl-kos">}</span>) =<span class="pl-c1">&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">root</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">text</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>;

const StyledExampleTwo = withStyles(styles)<span class="pl-c1">&lt;</span><span class="pl-ent">ComponentProps</span><span class="pl-c1">&gt;</span>(Component);  // ---<span class="pl-c1">&gt;</span> <span class="pl-v">This</span> <span class="pl-s1">line</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">StyledExampleTwo</span> <span class="pl-c1">text</span><span class="pl-c1">=</span><span class="pl-s">"I am styled!"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>;</pre></div>
<p dir="auto">It would have explained the usage more comprehensively.</p>
<p dir="auto">Bottom line is, while the Typescript guide is underway, please use unit tests to provide thorough usage examples</p>
<p dir="auto">Also, can anyone explain why does the unit test work without passing prop type <code class="notranslate">ComponentProps</code>, and my component fails to compile unless I pass the prop type <code class="notranslate">Props</code>?</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>v1.0.0-beta.16</td>
</tr>
<tr>
<td>React</td>
<td>Not relevant</td>
</tr>
<tr>
<td>browser</td>
<td>Not relevant</td>
</tr>
<tr>
<td>etc</td>
<td>Not relevant</td>
</tr>
</tbody>
</table>