Material ui: how to `makeStyles` with duplicate key?

user_4971866 0
Viewed 902

I have this style

    background:
      "-moz-linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 66%, rgba(0,0,0,0) 100%)",
    background:
      "-webkit-linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 66%, rgba(0,0,0,0) 100%)",
    background:
      "linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 66%, rgba(0,0,0,0) 100%)",

After create style with makeStyles, React complains about Duplicate key 'background'.

Is there a proper way to deal with this?

material-ui reactjs
1 Answers

material-ui does apply the vendor-prefixes automatically. According to the docs:

JSS uses feature detection to apply the correct prefixes. Don't be surprised if you can't see a specific prefix in the latest version of Chrome. Your browser probably doesn't need it.

Just keep only the last key in the object:

background: "linear-gradient..."

https://material-ui.com/styles/advanced/#css-prefixes

user_66959240
Related