reactjschakra-ui

why cant override the opacity of my MenuItem

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>
Solution

  • 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