为什么无法覆盖我的菜单项的不透明度

Question

我正在使用 chakra UI 创建一个界面，当项目完成时，它将具有 0.5 的不透明度，但我只希望其中的按钮具有 1 的不透明度

我需要我的 MenuItem 的不透明度为 1，而项目的其余部分的不透明度为 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>

Answer 1

我还没有找到任何方法来覆盖不透明度。我必须将其从包含不透明度的容器中取出并创建另一个