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.

<div class="demo-wrap">
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

Here is the CSS

.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;
}

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.

import React from 'react';
import {Box,Typography } from '@mui/material';
import { makeStyles } from '@material-ui/core/styles';


const CategoryCard = ({ image }) => {
    const useStyles = makeStyles({
        demowrap:{
            position:'relative'
        },
        '&::before':{
            content: '"',
            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 (
        <Box component="div" className={classes.demowrap}>
            <Box  component="div" className={classes.demoContent} > 
                <Typography component="p">Hello</Typography> 
            </Box>
        </Box>
    );
};

export default CategoryCard;

But I am not getting desired result. Image is not shown in the UI. Any help is appreciable. Thanks.