如何使材质UI下拉菜单半透明

Question

在过去的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，而不会影响下面的图纸菜单。有什么建议吗？

Answer 1

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

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

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