Question 227826 in CSS Question posted in
Some basic documentation can be found here.

Css – MUI set different opacity for Chip label/icon and background

I am trying to set on MUI Chip different opacity for label/icon and background.
My goal is to create Chip with: label & icon opacity = 1, background opacity = 0.0571.
Technologies in project: React, TS, MUI V5, Go.

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 tried already:
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
},
}}
Tags:

2

Answers


  1. 0

    This won’t work because the parent element’s opacity affects the child. To achieve this in a different way rather do something like the following:

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

    The RGB values would of course have to match your original color.

    Login or Signup to reply.
  2. 0

    You can use the background color with rgba value.

    <Chip
  label={capitalizeFirstLetter(invoice.status)}
  // color={func(invoice.status)}
  icon={<MdFiberManualRecord />}
  sx={{
    backgroundColor: "rgba(0, 0, 0, 0.0571)",
    color: "black",
  }}
/>

    This way you don’t need to define the color for both label and icon. You can also use the "backgroundColor" value with your "func(invoice.status)" but make that function returns rgba value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search