如何使 Material UI 下拉菜单半透明？答案

【问题标题】：How to make Material UI Drop down menu semi transparent?如何使 Material UI 下拉菜单半透明？
【发布时间】：2022-01-28 06:34:22
【问题描述】：

在过去的 30 分钟里，我一直在尝试让我的 Select 组件下拉菜单半透明，但无济于事。我尝试更改 Paper 组件，然后是 Menu，然后是 MenuList 道具，但它似乎不支持更改不透明度。这是我的代码的样子：

      <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>

我已经锁定MenuProps 并设法将纸张颜色更改为红色作为测试，但我仍然无法弄清楚如何让它稍微透明。最多，更改不透明度只会影响MenuItems，但不会影响下面的纸质菜单。有什么建议吗？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

我做了一些测试，我想我找到了问题所在。看起来 Material UI 添加了一个内联 opacity: 1; 的容器来包含 MenuItem 组件。由于容器在标记中不可见，因此样式或更新有点棘手。尝试将其添加到您的 CSS：

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

在本例中，我的目标是组件中的 Material UI 类；这样我就可以定位 div 而无需在标记中访问它。 !important 也是必需的，因为 Material UI 内联了 opacity: 1;

【讨论】：

非常感谢 Jeith，这解决了问题。