Writing makeStyle in Material UI

Question

I need to write the following CSS value as a string in a makeStyles function in Material UI, how can it be done?

background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),
    url(../assets/pexels-pixabay-41949.jpg),

i tried it this way but obviosuly is incorrect

background: 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),
    url(../assets/pexels-pixabay-41949.jpg)',

Answer 1

You can use Template literals to get this work. Move the URL into a variable and then form the actual CSS property.

const url = "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
const useStyles = makeStyles(() => ({
    boxBackground: {
    background: `linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),url(${url
})`,
    },
  }));

Here is the working CodeSandbox link.