How to make Material UI Drop down menu semi transparent?

user_16236649 0
Viewed 419

I've been tinkering for the past 30 minutes trying to make my Select components drop down menu semi transparent, but to no avail. I tried changed the Paper component, then the Menu, then MenuList props but it doesn't seem to support a change in opacity. Here's what my code looks like:

      <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've targeted MenuProps and managed to change the paper color to red as a test, but I still can't figure out how to just make it slightly transparent. At most, changing the opacity only effects the MenuItems but not the paper menu underneath. Any tips?

material-ui reactjs css
1 Answers

I did some testing, and I think I found the issue. It looks like Material UI adds a container with opacity: 1; inlined to contain the MenuItem components. Since the container isn't visible in the markup, it's a little tricky to style or update. Try adding this to your CSS:

.MuiPopover-root .MuiMenu-paper {
  opacity: 0.5 !important;
}

In this example, I'm targeting the Material UI classes in the component; that way I can target the div without having access to it in the markup. The !important is also required because Material UI is inlining the opacity: 1;

user_107196370
Related