如何在MUI V5中为Chip组件设置标签/图标与背景的不同透明度？

需求说明 #

需要实现MUI Chip组件的背景透明度为0.0571，同时标签和图标保持完全不透明（opacity=1），技术栈为React、TypeScript、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>
        ))}
    );
}

错误原因分析 #

你之前尝试给Chip根节点或组件本身设置opacity属性，这种方式会导致所有子元素（标签、图标）继承父元素的透明度，即便单独给子元素设置opacity:1也无法覆盖——因为子元素的透明度是基于父元素的透明度计算的，最终显示效果还是父元素的透明度。

正确思路是直接修改背景色的透明度，而非使用opacity属性。

正确实现方案 #

方案一：直接在sx中自定义样式 #

通过动态生成带透明度的rgba背景色，同时强制标签和图标使用原主题颜色（不透明）：

export default function InvoiceItem({ data, func }: Props) {
    return (
        {data.map((invoice, index: number) => {
            const statusColor = func(invoice.status);
            return (
                <Chip
                    key={index}
                    label={capitalizeFirstLetter(invoice.status)}
                    icon={<FiberManualRecordIcon />}
                    sx={{
                        mr: 5,
                        width: 100,
                        typography: "h4",
                        // 根据主题颜色生成带透明度的背景
                        backgroundColor: (theme) => {
                            const mainColor = theme.palette[statusColor].main;
                            // 将十六进制颜色转换为rgba格式
                            const hexToRgba = (hex: string, alpha: number) => {
                                const r = parseInt(hex.slice(1, 3), 16);
                                const g = parseInt(hex.slice(3, 5), 16);
                                const b = parseInt(hex.slice(5, 7), 16);
                                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
                            };
                            return hexToRgba(mainColor, 0.0571);
                        },
                        // 强制标签使用原主题颜色，不透明
                        "& .MuiChip-label": {
                            color: (theme) => theme.palette[statusColor].main,
                            opacity: 1,
                        },
                        // 强制图标使用原主题颜色，不透明
                        "& .MuiChip-icon": {
                            color: (theme) => theme.palette[statusColor].main,
                            opacity: 1,
                        },
                    }}
                />
            );
        })}
    );
}

方案二：自定义主题变体（适合全局复用） #

如果需要在多个地方使用这种样式，可以在MUI主题中自定义Chip的颜色变体：

// 主题配置文件
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    components: {
        MuiChip: {
            variants: [
                {
                    props: { color: 'primary' },
                    style: {
                        backgroundColor: 'rgba(25, 118, 210, 0.0571)', // Primary主色+透明度
                        '& .MuiChip-label': {
                            color: '#1976d2', // Primary主色（不透明）
                            opacity: 1,
                        },
                        '& .MuiChip-icon': {
                            color: '#1976d2',
                            opacity: 1,
                        },
                    },
                },
                {
                    props: { color: 'secondary' },
                    style: {
                        backgroundColor: 'rgba(220, 0, 78, 0.0571)', // Secondary主色+透明度
                        '& .MuiChip-label': {
                            color: '#dc004e',
                            opacity: 1,
                        },
                        '& .MuiChip-icon': {
                            color: '#dc004e',
                            opacity: 1,
                        },
                    },
                },
                // 可根据需求添加更多颜色变体
            ],
        },
    },
});

export default theme;

使用时直接指定color属性即可：

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

内容的提问来源于stack exchange，提问作者Giga Gogosashvili