title: How to override style of nested Material UI component from the ancestors?
body: <p>I am using a component from an external library that does not allow me to change much of its style, but I would like to change the style of a button that is a material ui button, when inspecting the element it clearly shows the classes <strong>MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit</strong></p>
  
  <p>how can I override the MuiIconButton-root style, for instance? this is my component: </p>
  
  <pre><code>class MyComponent extends Component {
  
      render() {
          const { classes } = this.props;
          return (
              &lt;div className={classes.myComponent}&gt;
                  &lt;3rdPartyComponent /&gt;
              &lt;/div&gt;
          );
  
      }
  }
  
  
  export default withStyles(styles)(MyComponent)
  </code></pre>
  
  <p>I have tried declaring my styles function as follows, without success:</p>
  
  <pre><code>const styles = theme =&gt; ({
    myComponent: {
      "&amp;.MuiIconButton-root": {
        padding: "0px"
      }
    }
  });
  </code></pre>
  
  <p>Can anybody help me? Thanks in advance.</p>