title: Material UI - MakeStyles Overridden
body: <p>Good day, im attempting to add custom CSS to a material UI App Bar but all the styles i apply using the makeStyles function is overridden by the default Material UI styling. The only fix is to apply !important to my styling but I dont see this as a viable workaround. Following the docs it states to use the StylesProvider component to configure the CSS injection order but this also hasnt proven any results. Please any help will be greatly appreciated here is an example of what ive attempted to do.</p>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>import React from 'react';
  import { hydrate, render } from "react-dom";
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import 'bootstrap/dist/css/bootstrap.css';
  import 'typeface-roboto';
  import { StylesProvider } from '@material-ui/core/styles';
  
  const rootElement = document.getElementById("root");
  if (rootElement.hasChildNodes()) {
   hydrate(&lt;StylesProvider injectFirst&gt;&lt;App /&gt;&lt;/StylesProvider&gt;, rootElement);
  } else {
   render(&lt;StylesProvider injectFirst&gt;&lt;App /&gt;&lt;/StylesProvider&gt;, rootElement);
  }
  
  serviceWorker.unregister();
  </code></pre>
  
  <p><strong>Component that uses MakeStyles</strong></p>
  
  <pre><code>const navBarStyles = makeStyles((theme) =&gt; ({
    link: {
      margin: theme.spacing(1, 1.5)
    }
  }));
  
  export default function NavbarComponent() {
    const classes = navBarStyles();
      return (
        &lt;AppBar position="static" elevation={0}&gt;
          &lt;Toolbar className="flex-wrap"&gt;
            &lt;Typography variant="h6" color="inherit" noWrap className="flex-grow-1"&gt;
              test
            &lt;/Typography&gt;
            &lt;nav&gt;
              &lt;Link variant="button" color="textPrimary" href="#" className={classes.link}&gt;
                Features
              &lt;/Link&gt;
            &lt;/nav&gt;
          &lt;/ToolBar&gt;
        &lt;/AppBar&gt;
  )}
  </code></pre>
  
  <p>Note im using React-Snap with this project so im not sure if that is the reason it is breaking, <a href="https://www.npmjs.com/package/react-snap" rel="nofollow noreferrer">https://www.npmjs.com/package/react-snap</a></p>