title: MaterialUI, how to overwrite styles of nested MUI component?
body: <p>I am using <a href="https://github.com/marmelab/react-admin" rel="nofollow noreferrer">react-admin</a> and I am using their <a href="https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/detail/Create.js" rel="nofollow noreferrer"><code>Create</code></a> component that use <code>TextField</code> from <code>@material-ui/core</code>.</p>
  
  <p>Of course I have read the documentation <a href="https://material-ui.com/css-in-js/advanced/#class-names" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I would like to completely customize the render for a custom view, this is how look the generated html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="create-page Component-root-55" notification=""&gt;
     &lt;div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53"&gt;
        &lt;form class="simple-form" locale="en"&gt;
           &lt;div class="MuiCardContent-root-86 CardContentInner-root-85"&gt;
              &lt;div class="ra-input ra-input-email"&gt;
                 &lt;div class="MuiFormControl-root-11 MuiFormControl-marginNormal-12 MuiFormControl-fullWidth-14" locale="en"&gt;
                    &lt;label class="MuiFormLabel-root-20 MuiInputLabel-root-15 MuiInputLabel-formControl-16 MuiInputLabel-animated-19" data-shrink="false" for="email"&gt;&lt;span&gt;Email *&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="MuiInput-root-27 MuiInput-fullWidth-34 MuiInput-formControl-28 MuiInput-underline-31"&gt;&lt;input aria-invalid="false" class="MuiInput-input-35 MuiInput-inputType-38 withRouter-Connect-SubscribeNewsletterForm---inputType-52" id="email" name="email" type="email" value=""&gt;&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="MuiToolbar-root-97 MuiToolbar-regular-99 MuiToolbar-gutters-98 Toolbar-toolbar-92 Toolbar-desktopToolbar-93" role="toolbar"&gt;
              &lt;div class="Toolbar-defaultToolbar-95"&gt;
                 &lt;button tabindex="0" class="MuiButtonBase-root-129 MuiButton-root-103 MuiButton-contained-114 MuiButton-containedPrimary-115 MuiButton-raised-117 MuiButton-raisedPrimary-118 SaveButton-button-101" type="submit"&gt;
                    &lt;span class="MuiButton-label-104"&gt;
                       &lt;svg class="MuiSvgIcon-root-132 SaveButton-iconPaddingStyle-102" focusable="false" viewBox="0 0 24 24" aria-hidden="true"&gt;
                          &lt;g&gt;
                             &lt;path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"&gt;&lt;/path&gt;
                          &lt;/g&gt;
                       &lt;/svg&gt;
                       Save
                    &lt;/span&gt;
                    &lt;span class="MuiTouchRipple-root-139"&gt;&lt;/span&gt;
                 &lt;/button&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="Toolbar-spacer-96"&gt;&lt;/div&gt;
        &lt;/form&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have just a few experience in overriding styles in material-ui.</p>
  
  <p>After succeeding in finding how to remove the boxShadow to the <code>card</code> thanks to the explanation in the <code>Create.js</code>, I am struggling finding how to edit what is within the create.</p>
  
  <p>For instance, I would like to remove the background of <code>MuiToolbar</code>, identified with <code>MuiToolbar-regular-99</code>, this is what I have:</p>
  
  <pre class="lang-js prettyprint-override"><code>
  const createStyles = {
    card: {
      boxShadow: 'none',
      borderRadius: 0,
    },
    toolbar: {
      toolbar: {
        backgroundColor: 'transparent',
      },
    },
  };
  
  const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
    return (
      &lt;CreateDefault
        classes={classes}
        {...rest}
      /&gt;
    );
  });
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre class="lang-js prettyprint-override"><code>const createStyles = {
    card: {
      boxShadow: 'none',
      borderRadius: 0,
    },
    toolbar: {
      backgroundColor: 'transparent',
    },
  };
  
  const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
    console.log(classes);
    return (
      &lt;CreateDefault
        classes={{
          card: classes.card,
          toolbar: classes.toolbar
        }}
        {...rest}
      /&gt;
    );
  });
  </code></pre>
  
  <p>This doesn't apply any CSS to the toolbar, I don't get the logic and found jss so complex that I must ask for help.</p>
  
  <p>How can I override nested styles with Material UI component, even if using a wrapper that wrap many?</p>
  
  <p><strong>Edit codesandbox</strong></p>
  
  <p>The closest I could get too: <a href="https://codesandbox.io/s/2uboj" rel="nofollow noreferrer">https://codesandbox.io/s/2uboj</a> </p>
  
  <p>It doesn't have by default the grey toolbar because of probably react-admin version used, but you can see the goal.</p>