title: React makeStyles doesn't set background image
body: <p>Despite trying several ways to load the image for the backgroundImage property, it never shows up in page. Loading external images (for example from google) works as expected.</p>
  
  <p>I tried:</p>
  
  <pre><code>backgroundImage: `url(${Papyrus})`
  backgroundImage: "url(" + Papyrus + ")"
  backgroundImage: "url(../../assets/images/papyrus.png)"
  backgroundImage: Papyrus
  backgroundImage: "url(\"../../assets/images/papyrus.png\")"
  backgroundImage: "url(assets/images/papyrus.png)"
  </code></pre>
  
  <p>NONE of them work. The image is loaded when I look at my network audit, I can find it in the static folder, but it's never displayed.</p>
  
  <p>App.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import makeStyles from './app-styles';
  import {Container} from "@material-ui/core";
  import Description from "../description/description";
  
  const App: React.FC = () =&gt; {
      const classes = makeStyles();
      return (
          &lt;div className="App"&gt;
              &lt;Container maxWidth={"xl"}&gt;
                  &lt;div className={classes.row}&gt;
                      &lt;Description/&gt;
                  &lt;/div&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <p>description.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from "react";
  import makeStyles from './description-styles';
  
  interface DescriptionProps {
  }
  
  const Description: React.FC&lt;DescriptionProps&gt; = () =&gt; {
      const classes = makeStyles();
  
      return (
          &lt;div className={classes.descriptionCard}&gt;
              &lt;p&gt;Some text&lt;/p&gt;
          &lt;/div&gt;
      )
  };
  
  export default Description;
  </code></pre>
  
  <p>description-styles.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import makeStyles from "@material-ui/core/styles/makeStyles";
  import Papyrus from "../../assets/images/papyrus.png";
  
  export default makeStyles(theme =&gt; ({
      descriptionCard: {
          backgroundImage: `url(${Papyrus})`,
          // margin: 'auto',
          height: '25vh',
          width: 'calc(20vw * 0.54 - 2%)',
          borderRadius: 8,
          display: 'flex',
          marginLeft: '10px',
          marginTop: '10px'
      },
      text: {
  
      }
  }))
  </code></pre>