[Popover] Button's hover effect is not working in Popover.Trigger

[zhanglun]

Bug report

Button's hover effect is not working in Popover.Trigger

Reproducible example

demo code blow

<Popover.Root>
  <Popover.Trigger>
    <Button variant="soft">
      <ChatBubbleIcon width="16" height="16" />
      Comment
    </Button>
  </Popover.Trigger>
  <Popover.Content width="360px">
    <Flex gap="3">
      <Avatar
        size="2"
        src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
        fallback="A"
        radius="full"
      />
      <Box flexGrow="1">
        <TextArea placeholder="Write a comment…" style={{ height: 80 }} />
        <Flex gap="3" mt="3" justify="between">
          <Flex align="center" gap="2" asChild>
            <Text as="label" size="2">
              <Checkbox />
              <Text>Send to group</Text>
            </Text>
          </Flex>

          <Popover.Close>
            <Button size="1">Comment</Button>
          </Popover.Close>
        </Flex>
      </Box>
    </Flex>
  </Popover.Content>
</Popover.Root>

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/themes	^3.0.5
React	n/a	^18.2.0
Browser	Chrome	124.0.6367.207
Assistive tech
Node	n/a	v20.11.1
npm/yarn	pnpm	8.15.4
Operating System	macOS	14.4.1 (23E224)

[zhanglun]

I deleted node_modules and reinstalled the dependencies and the problem disappeared. This may be a problem with the dependency management tool I use.