[FIXED] why cant override the opacity of my MenuItem

Issue

I'm using hakra 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

Answered By - João Vitor Miranda
Answer Checked By - - Candace Johnson (ReactFix Volunteer)