title: problem with @material-ui/core/styles: does not contain an export named 'makeStyles'
body: <p>First of all I have to say that I have this problem for more than 2 days and I don't really know what to do more, I searched all over stack overflow and there where some questions that where quit exactly to my question, I tried them, and none of them worked, I searched for documentation and I followed, however I don't know if I was doing it right.</p>
  <p>I have to say that I just started to learn React.</p>
  <p>Okay, so the error occurs when I use <code>npm start</code>, in the terminal, I got a <code>Failed to compile</code>, and an error is shown up in the browser:</p>
  <blockquote>
  <p>4:16-26 '@material-ui/core/styles' does not contain an export named
  'makeStyles</p>
  </blockquote>
  <p>I have to mention that i named my js file as styles.js, later on i renamed it as Component.styles.js, because like that react would know it's a style file, i don't really know if it works, however i will let the source where i found it, if you want to check it:
  <a href="https://towardsdev.com/use-your-makestyles-7d347f9a3e96" rel="nofollow noreferrer">https://towardsdev.com/use-your-makestyles-7d347f9a3e96</a></p>
  <p>Then i have a App.js where i import the js style, like this:</p>
  <pre><code> import useStyles from './yourComponent.styles.js';
  </code></pre>
  <p>This is my:</p>
  <p>yourComponent.styles.js:</p>
  <pre><code>import { makeStyles } from '@material-ui/core/styles';
  
  const useStyles = makeStyles({
    BarStylee: {
      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
      border: 0,
      borderRadius: 3,
      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
      color: 'white',
      height: 48,
      padding: '0 30px',
    },
  });
  
  export default useStyles;
  </code></pre>
  <p>And this is my:</p>
  <p>App.js:</p>
  <pre><code>import React from 'react';
  import {Container,AppBar,Typography,Grow,Grid} from '@material-ui/core';
  import pens from'./images/pencils.jpg';
  import Posts from '../src/components/Posts/Posts.js';
  import Form from '../src/components/Form/Form.js';
  import useStyles from './yourComponent.styles.js';
  const App = () =&gt; {
      const classes = useStyles();
      return (
          &lt;Container maxidth=&quot;lg&quot;&gt;
              &lt;AppBar className={classes.BarStyle} position=&quot;static&quot; color=&quot;inherit&quot;&gt;
                  &lt;Typography variant=&quot;h2&quot; align=&quot;center&quot;&gt;School&lt;/Typography&gt;
                  &lt;img  src={pens} alt=&quot;pencils&quot; height=&quot;150&quot;/&gt;
              &lt;/AppBar&gt;
              &lt;Grow in&gt;
                  &lt;Container&gt;
                      &lt;Grid container justify=&quot;space-between&quot; alignItems=&quot;stretch&quot; spacing={3}&gt;
                          &lt;Grid item xs={12} sm={7}&gt;
                              &lt;Posts /&gt;
                          &lt;/Grid&gt;
                          &lt;Grid item xs={12} sm={4}&gt;
                              &lt;Form /&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/Container&gt;
              &lt;/Grow&gt;
          &lt;/Container&gt;
      );
  }
  export default App;
  </code></pre>
  <p>Thanks!!</p>