title: What is the alternative of makeStyles for Material UI v.5
body: <p>I just started using Material UI version 5. Originally to use my custom theme's styles, I would use makestyles, but it seems that does not work in v.5. My themes are on their own component, and to import those, I used <code>{createTheme}</code> instead of the old <code>{createMuiTheme}</code>. I have my theme imported into the Parent component as usual and have it set up as <code>&lt;ThemeProvider theme{theme}&gt;&lt;/ThemeProvider&gt;</code>.</p>
  <p>Now, on my other component, I again was trying to use useStyles, but it was not working because it is not used in version 5. I am having a hard time trying to figure out how to convert it so that it can be used in version 5. Here is some of the unfinished code I was working on:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const useStyles = makeStyles((theme) =&gt; ({
      logo: {
          height: "8em",
          marginLeft: "0.2em",
      },
      tabContainer: {
          marginLeft: "auto",
      },
      tab: {
          ...theme.typography.tab,
          minWidth: 10,
          marginRight: "50px",
          opacity: 1,
          "&amp;hover": {
              color: theme.palette.common.purple,
              textDecoration:"none",
          },
      },
  }));
  
  export default function Navigation(props) {
      const classes = useStyles();
  
      const [value, setValue] = useState(0);
  
      const handleChange = (e, value) =&gt; {
          setValue(value);
      };
      const refreshPage = () =&gt; {
          window.location.reload();
      };
      
      useEffect(() =&gt; {
          switch (window.location.pathname) {
              case "/":
                  if (value !== 0) {
                      setValue(0);
                  }
                  break;
                  default:
                  break;
          }
      }, [value]);
  
  
      return (
        &lt;React.Fragment&gt;
          &lt;ElevationScroll&gt;
            &lt;AppBar
              position="relative"
              style={{
                borderBottom: "2px solid black",
              }}
            &gt;
              &lt;Toolbar disableGutters&gt;
                  &lt;img src={logo} alt="nasa logo" className={classes.logo}/&gt;
                  &lt;Typography variant="h1" style={{ textAlign: "center" }}&gt;
                    Nasa&lt;br&gt;&lt;/br&gt;Photos
                  &lt;/Typography&gt;
                  &lt;Tabs
                    value={value}
                    onChange={handleChange}
                    className={classes.tabContainer}
                    indicatorColor="primary"
                  &gt;
                    &lt;Tab
                      className={classes.tab}
                      component={Link}
                      onClick={refreshPage}
                      to="/"
                      label="Home"
                    /&gt;
                  &lt;/Tabs&gt;
              &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
          &lt;/ElevationScroll&gt;
        &lt;/React.Fragment&gt;
      );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I have read about the xs property and I have also heard of the styled() through Material UI's documentation, but I am having a hard time applying it to the code that I have written and would like a push in the right direction.</p>
  <p>So to edit what I had earlier, I am going to also add my Theme.js file as well. I thought that this has been done correctly, but again it isn't reading my tab nor my palette.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {createTheme} from "@mui/material/styles";
  
  const pink = "#FFC0CB";
  const lightblue = "#ADD8E6";
  const purple = "#800080";
  const black = "#000000";
  
  const theme = createTheme({
      palette: {
          common: {
              pink: pink,
              lightblue: lightblue,
              purple: purple,
              black: black
          },
          primary: {
              main: pink,
              mainGradient: "linear-gradient(to left, purple, pink)",
          },
          secondary: {
              main: lightblue,
              mainGradient: "linear-gradient(to right, lightblue, pink)"
          },
      },
      typography: {
          tab: {
              fontFamily:"Orbitron",
              textTransform: "none",
              fontSize: "2.5rem",
              color: black,
          },
          h1: {
              fontFamily: "Orbitron",
              fontSize: "2.5em"
          },
          h2: {
              fontFamily: "Orbitron",
              fontSize: "2.5em"
          },
          subtitle1: {
              fontFamily: "Orbitron"
          },
          subtitle2: {
              fontFamily: "Orbitron",
              fontSize: "1.5rem"
          },
          buttons: {
              fontFamily: "Orbitron",
              textTransform: "none"
          },
      },
  });
  
  export default theme</code></pre>
  </div>
  </div>
  </p>
  <p>I have imported my theme into my App.js file which is my top level file, I will include that here just in case something has been done wrong with that:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{useState} from "react";
  import PicOfDay from "./Components/PictureOfDay";
  import Navigation from "./Components/Navigation";
  import {
    Typography,
  } from "@mui/material";
  import {ThemeProvider} from '@mui/material/styles'
  import theme from "../src/ui/Theme";
  import {BrowserRouter as Router} from "react-router-dom";
  
  function App(props) {
    const [date, setDate] = useState(new Date());
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;Router&gt;
          &lt;Navigation date={date} setDate={setDate} /&gt;
          &lt;Typography
            variant="h1"
            style={{fontSize: "5rem", textAlign: "center", marginTop:"2rem"}}
            &gt;
              Astronomy Picture of the Day
          &lt;/Typography&gt;  
          {/* &lt;PicOfDay date={date} /&gt; */}
        &lt;/Router&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>I did look at some documentation a couple of you sent me, and I was looking at the troubleshooting part where it said &quot;[Types] Property &quot;palette&quot;, &quot;spacing&quot; does not exist on type 'DefaultTheme'&quot; because makeStyles is exported differently and it does not know about Theme. There seems to be a snipet to put in a typescript project (which I am not running, I am using javascript) and there was a section to add a ts file to my javascript and put the snippet it recommended, which I tried, but am I missing something because it did not do anything and I am not sure if I need to put something in my App.js file in order for it to read that?</p>