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)',

If the newline in the string is in your actual source and not just formatted for here, that could be your problem. Strings are only 1 line long, if you want to break lines use `\n` in the string or use template syntax with `\`` instead of `'`. In this case you can choose either or just use 1 line without breaks, it is still valid CSS. but the code you posted is not valid JS — casraf, Mar 13 '22 at 13:45
its actually one line not two , just not enough space for the whole string — , Mar 13 '22 at 13:55

score 0 · Answer 1 · answered Mar 13 '22 at 23:03

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.

Writing makeStyle in Material UI

1 Answers1