React-ts垂直标签页切换时添加自定义CSS类的实现指导

针对你使用MUI Vertical Tabs组件的场景，以下是两种常见实现方式，可分别给激活的Tab或TabPanel添加自定义类：

1. 给激活的Tab添加自定义类 #

通过当前选中的value与Tab的index做条件判断，动态拼接类名：

方式一：直接用模板字符串 #

{items.map((item, index) => (
  <Tab 
    className={`u-tab-btn ${value === index ? 'my-custom-class' : ''}`} 
    label={item.title} 
    key={index} 
  />
))}

方式二：用clsx处理多类名（推荐） #

clsx是React生态中常用的条件类名工具，能更清晰地处理多类名组合：

1. 先安装依赖：

npm install clsx
# 或
yarn add clsx

2. 导入并使用：

import clsx from 'clsx';

// ...

{items.map((item, index) => (
  <Tab 
    className={clsx('u-tab-btn', { 
      'my-custom-class': value === index 
    })} 
    label={item.title} 
    key={index} 
  />
))}

2. 给激活的TabPanel添加自定义类 #

同样利用value与index的匹配关系，给对应TabPanel添加类：

{items.map((item, index) => (
  <TabPanel 
    theme={theme} 
    value={value} 
    index={index} 
    key={index}
    className={clsx({ 'my-custom-class': value === index })}
  >
    {item.content}
  </TabPanel>
))}

额外：直接用MUI的sx属性设置选中样式 #

如果不需要额外CSS类，只想直接定义选中状态的样式，可利用MUI自动添加的Mui-selected类，通过sx属性内联设置：

<Tab 
  className="u-tab-btn"
  sx={{
    '&.Mui-selected': {
      backgroundColor: '#f5f5f5',
      color: '#2196f3',
      fontWeight: 'bold',
      // 其他自定义样式
    }
  }}
  label={item.title} 
  key={index} 
/>

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