For the last half hour, I've been experimenting with my Select dropdown menu in an attempt to make it semi-transparent, but without success. I've tried adjusting the properties of the Paper, then the Menu, and then the MenuList, yet it appears that opacity changes are not supported. Here's a snippet of my code:
<TextField
id="outlined-select-links"
required
error={false}
select
InputLabelProps={{ shrink: true }}
size="small"
sx={{ width: 400, mt: 1, mb: 4 }}
label="Links"
helperText="Please select an account to link to your profile. 1 minimum."
SelectProps={{
multiple: true,
value: links,
MenuProps: {
TransitionComponent: Fade,
PaperProps: {
sx: {
opacity: 0.1,
},
},
},
onChange: handleLinkChange,
renderValue: (selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
),
}}
>
{accounts.map((option) => (
<MenuItem key={option} value={option} sx={{ my: -1 }}>
<Checkbox checked={links.indexOf(option) > -1} />
<ListItemText primary={option} />
</MenuItem>
))}
</TextField>
I managed to change the paper color to red as a test by targeting MenuProps, but I'm still struggling to achieve a slight transparency effect. Adjusting the opacity only seems to impact the MenuItems rather than the underlying paper menu. Any guidance would be greatly appreciated.