I'm using chakra UI to create an interface and when the project is finished it will have an opacity of 0.5 but I want only the button inside it to have an opacity of 1
I need my MenuItem to have an opacity of 1 while the rest of my project has an opacity of 0.5
{projects.map(p => (
<Flex opacity={p.project.status==='CONCLUIDO' ? '0.5' : '1'}>
<Flex gap='20px'>
<Flex justifyContent='space-between' width='100%' gap='10px'>
<Menu>
<MenuButton </MenuButton>
<MenuList>
<MenuItem opacity={ "1"} to={`/projetos?visualizar=${p.project.id}`} as={Link}>Visualizar projeto</MenuItem>
</MenuList>
</Menu>
</Flex>
</Flex>
I havent found any way to override the opacity. I had to take it out of the container that contains the opacity and create another one