title: how can i change background's image opacity in material ui?
body: <p>I want to change the opacity of background image. I can do this using plain html and css. Here is an example html and css markup.</p>
  <pre><code>&lt;div class=&quot;demo-wrap&quot;&gt;
    &lt;div class=&quot;demo-content&quot;&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is the CSS</p>
  <pre><code>.demo-wrap {
    position: relative;
  }
  
  .demo-wrap:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
  }
  
  .demo-content {
    position: relative;
  }
  </code></pre>
  <p>I want to change the opacity of background image using Material UI. To do so I have used makeStyles hook of material Ui. I have made customStye and used it in className. Here is my code.</p>
  <pre><code>import React from 'react';
  import {Box,Typography } from '@mui/material';
  import { makeStyles } from '@material-ui/core/styles';
  
  
  const CategoryCard = ({ image }) =&gt; {
      const useStyles = makeStyles({
          demowrap:{
              position:'relative'
          },
          '&amp;::before':{
              content: '&quot;',
              display: 'block',
              position: 'absolute',
              left: 0,
              top: 0,
              width: '100%',
              height: '100%',
              opacity: 0.6,
              backgroundImage: `url(${image})`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: '50% 0',
              backgroundSize: 'cover'
          },
  
          demoContent:{
              position:'relative'
          }
      })
    
  
      const classes = useStyles()
      return (
          &lt;Box component=&quot;div&quot; className={classes.demowrap}&gt;
              &lt;Box  component=&quot;div&quot; className={classes.demoContent} &gt; 
                  &lt;Typography component=&quot;p&quot;&gt;Hello&lt;/Typography&gt; 
              &lt;/Box&gt;
          &lt;/Box&gt;
      );
  };
  
  export default CategoryCard;
  </code></pre>
  <p>But I am not getting desired result. Image is not shown in the UI. Any help is appreciable.
  Thanks.</p>