Chakra UI如何在Select下拉选项中添加Tabs标签页组件

HTML原生<option>元素（包括绝大多数组件库默认封装的Select组件的option节点）仅支持渲染纯文本内容，规范层面不允许嵌套任何交互式自定义组件。将Tabs组件直接嵌入option内部的写法，会被浏览器解析错误，嵌套组件的交互逻辑会全部失效，和你配置的样式属性无关。

不要使用默认Select的option插槽承载复杂内容，改用「自定义触发器+自定义弹出内容」的逻辑实现带分类切换的选择器：

• 触发器部分：复用原有Select的样式，负责展示已选中内容、点击唤起下拉层
• 弹出层部分：直接在弹出层容器内放置Tabs组件，每个Tab面板下渲染对应分类的选项，点击选项后更新选中值、关闭弹出层即可

从代码里的_focusVisible、样式prop写法判断你用的是Chakra UI，该组件库的原生Select组件不支持自定义下拉内容，可以直接用Popover组件组合实现，参考代码如下：

import { useState } from 'react'
import { 
  Popover, 
  PopoverTrigger, 
  PopoverContent, 
  Button, 
  Tabs, 
  TabList, 
  Tab, 
  TabPanels, 
  TabPanel, 
  Box 
} from '@chakra-ui/react'

export default function CategorySelect() {
  const [selected, setSelected] = useState('')
  const [open, setOpen] = useState(false)

  // 分类选项配置
  const categoryList = [
    {
      name: '分类一',
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' }
      ]
    },
    {
      name: '分类二',
      options: [
        { label: '选项3', value: 'opt3' },
        { label: '选项4', value: 'opt4' }
      ]
    }
  ]

  const handleSelect = (label) => {
    setSelected(label)
    setOpen(false)
  }

  return (
    <Popover isOpen={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
      {/* 选择器触发器，复用原有样式 */}
      <PopoverTrigger>
        <Button
          borderLeftRadius={'5px'}
          borderRightRadius={'none'}
          bgColor={'#0C0C0C'}
          border={'none'}
          color={'white'}
          _focusVisible={{
            boxShadow: 'none',
          }}
          w="120px"
        >
          {selected || '请选择'}
        </Button>
      </PopoverTrigger>
      {/* 下拉弹出层内容 */}
      <PopoverContent bg="#0C0C0C" border="none" p={2}>
        <Tabs variant="soft-rounded" colorScheme="whiteAlpha">
          <TabList>
            {categoryList.map(cat => (
              <Tab key={cat.name} color="white">{cat.name}</Tab>
            ))}
          </TabList>
          <TabPanels>
            {categoryList.map(cat => (
              <TabPanel key={cat.name} p={2}>
                {cat.options.map(opt => (
                  <Box
                    key={opt.value}
                    p={2}
                    color="white"
                    borderRadius="4px"
                    cursor="pointer"
                    _hover={{ bg: 'rgba(255,255,255,0.1)' }}
                    onClick={() => handleSelect(opt.label)}
                  >
                    {opt.label}
                  </Box>
                ))}
              </TabPanel>
            ))}
          </TabPanels>
        </Tabs>
      </PopoverContent>
    </Popover>
  )
}

上述实现完全避开了option标签的嵌套限制，下拉层内的标签切换、选项点击功能均可正常运行，实现逻辑和你需要的效果一致：点开选择器后可先切换标签分类，再在对应分类下选择目标选项，选中后下拉层自动收起，选择器展示已选内容。

内容的提问来源于stack exchange，提问作者Sohaib Ashraf