I wanted to set the background color of an element to be the primary main color but with transparency using Material-UI, tried to do it the following ways but both hasn't worked , any suggestion i would highly appreciate it.
backgroundColor: `rgba(${theme.palette.primary.main}, 0.6)`,
&
background: `rgba(${theme.palette.primary.main}, 0.6)`,
A solution which I have used for this before is to handle the transparent color in the theme.
so for example in one of my projects I define the theme.palette.primary.main color at the top of my theme and then I calculate a lighter variant using the rgba function as you have done in your example as well. I then define this color in my theme so I can reuse it in multiple places by calling theme.palette.primary.light (or whatever you wish to call it).
and then