React中自定义Chakra UI Tab元素覆盖aria-selected默认选中样式

你不用手动匹配aria-selected、data-selected属性写CSS覆盖，Chakra UI本身已经封装了状态获取和样式覆盖的能力，下面是几种常用的实现方式，按推荐优先级排序：

1. 用内置_selected样式简写（最推荐，无优先级问题） #

Chakra UI 专门给可选组件提供了_selected样式简写，编译后会自动生成和默认样式权重完全一致的&[aria-selected=true], &[data-selected]选择器，写在sx属性或者样式props里会直接覆盖默认样式，不需要加!important。

import { Tab } from '@chakra-ui/react'

<Tab
  sx={{
    // 未选中状态的默认样式
    color: 'gray.500',
    borderBottom: '2px solid transparent',
    padding: '10px 16px',
    // 选中状态样式
    _selected: {
      color: 'red.600', // 替换默认的blue.600
      borderColor: 'currentColor',
      fontWeight: 600
    }
  }}
>
  Basics
</Tab>

2. 按判断状态传内联style的写法 #

如果你一定要用原生style属性、通过判断选中状态传不同样式，可以通过两种方式拿到isSelected状态：

方式A：函数式子元素直接拿状态 #

Tab组件支持传入函数作为子元素，参数里会暴露当前是否选中的状态：

<Tab>
  {({ isSelected }) => {
    return (
      <span
        style={{
          color: isSelected ? '#dc2626' : '#6b7280',
          fontWeight: isSelected ? 600 : 400
        }}
      >
        Basics
      </span>
    )
  }}
</Tab>

方式B：通过useTab钩子拿状态，给Tab根元素加内联样式 #

如果要直接给Tab的根按钮元素加内联样式，可以用官方提供的useTab钩子获取选中状态：

import { useTab } from '@chakra-ui/react'

const CustomTab = (props) => {
  const tabProps = useTab(props)
  const isSelected = !!tabProps['aria-selected']

  return (
    <button
      {...tabProps}
      style={{
        // 未选中公共样式
        color: '#6b7280',
        borderBottom: '2px solid transparent',
        padding: '10px 16px',
        // 选中时覆盖样式
        ...(isSelected && {
          color: '#dc2626',
          borderColor: 'currentColor'
        })
      }}
    >
      {props.children}
    </button>
  )
}

// 使用时直接替换原生Tab即可
<TabList>
  <CustomTab>Basics</CustomTab>
</TabList>

3. 全局统一配置选中样式 #

如果项目里所有Tab都要用同一套自定义选中样式，直接在主题配置里覆盖默认样式即可，不用每个Tab单独写：

import { extendTheme } from '@chakra-ui/react'

const customTheme = extendTheme({
  components: {
    Tabs: {
      baseStyle: {
        tab: {
          // 全局未选中样式
          color: 'gray.500',
          fontWeight: 400,
          // 全局选中样式
          _selected: {
            color: 'brand.500',
            borderColor: 'currentColor',
            fontWeight: 600
          }
        }
      }
    }
  }
})

注意：不要手动给Tab组件加aria-selected属性，这个属性由组件内部自动管理，手动添加容易和内部状态逻辑冲突。

内容的提问来源于stack exchange，提问作者Juel Hossain