如何在Tamagui中通过容器hover切换子元素显隐与高亮？

Tamagui的样式系统和传统CSS存在差异，直接用常规CSS选择器可能无法被正确解析，你需要用Tamagui支持的嵌套伪类语法或variants特性来实现需求。以下是两种可行方案：

方案1：使用styled组件嵌套伪类 #

先创建带hover状态的容器组件，通过父组件的:hover伪类控制子文本的样式：

import { View, Text, styled } from 'tamagui'

// 定义带hover效果的容器
const HoverContainer = styled(View, {
  // 容器基础样式（可根据需求调整）
  padding: 12,
  cursor: 'pointer',

  // hover时控制子元素样式
  '&:hover #hidden': {
    display: 'none',
  },
  '&:hover #notHidden': {
    color: '$blue10', // 替换为你需要的高亮颜色
    fontWeight: 'bold',
  },
})

// 使用组件
export default function YourComponent({ text }) {
  return (
    <HoverContainer>
      <Text color="$white1" fontSize="$4" id="notHidden">
        {text}
      </Text>
      <Text color="$white1" fontSize="$4" id="hidden">
        {text}
      </Text>
    </HoverContainer>
  )
}

方案2：使用Tamagui的variants和hoverStyle（推荐） #

这种方式更贴合Tamagui的最佳实践，通过variants定义状态，自动绑定hover事件：

import { View, Text, styled } from 'tamagui'

const HoverContainer = styled(View, {
  padding: 12,
  cursor: 'pointer',

  // 定义状态变体
  variants: {
    isHovered: {
      true: {
        '& #hidden': { display: 'none' },
        '& #notHidden': { color: '$blue10', fontWeight: 'bold' },
      },
    },
  },

  // 自动将hover状态映射到isHovered变体
  hoverStyle: {
    isHovered: true,
  },
})

export default function YourComponent({ text }) {
  return (
    <HoverContainer>
      <Text color="$white1" fontSize="$4" id="notHidden">
        {text}
      </Text>
      <Text color="$white1" fontSize="$4" id="hidden">
        {text}
      </Text>
    </HoverContainer>
  )
}

注意事项 #

• 你原代码中的fos是笔误，Tamagui中字体大小属性为fontSize
• Tamagui的样式编译器只会解析组件内部定义的样式规则，外部CSS文件中的选择器可能无法作用到组件内部的Tamagui元素

内容的提问来源于stack exchange，提问作者Alexey Kostyuhin