My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571.
Technologies used in this project include React, TypeScript, Material-UI v5, and Go.
Below is a snippet of my code:
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>
))}
);
}
I have already attempted the following:
<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
},
}}