MUI为芯片标签/图标和背景设置不同的不透明度

Question

我正在尝试在 MUI 芯片上为标签/图标和背景设置不同的不透明度。 我的目标是创建芯片：标签和图标不透明度 = 1，背景不透明度 = 0.0571。
项目中技术：React、TS、MUI V5、Go。

我的代码：

export default function InvoiceItem({ data, func }: Props) {
    return (

    {data.map((invoice, index: number) => (

        <Chip
        label={capitalizeFirstLetter(invoice.status)}
        color={func(invoice.status)}
        sx={{
            mr: 5,
            width: 100,
            typography: "h4",
           }}
        icon={<FiberManualRecordIcon />}
        ></Chip>
    ))}
    );
}

我已经尝试过：
1.

<Chip
label={capitalizeFirstLetter(invoice.status)}
color={func(invoice.status)}
opacity= 0.057
sx={{
    "& .MuiChip-label": {
    opacity: 1},
}}
icon={<FiberManualRecordIcon />}
> 
</Chip>

sx={{
    "& .MuiChip-root”: {
    opacity: 0.0571
},

    "& .MuiChip-label": {
    opacity: 1
},
}}

Answer 1

这不起作用，因为父元素的不透明度会影响子元素。要以不同的方式实现这一目标，请执行以下操作：

"& .MuiChip-root”: {
    background-color: rgb(100 100 100 / 0.057)
},

RGB 值当然必须与您的原始颜色相匹配。