写一个例子 antd中 tab点击让 tab里面自定义img图片变颜色

好的，以下是一个简单的例子：

1. 首先需要安装 antd 和 react-img-ix 库。

npm install antd react-img-ix --save

2. 在组件中导入 antd 和 react-img-ix 库，并定义一个图片数组和一个状态变量。

import React, { useState } from 'react';
import { Tabs } from 'antd';
import ImgIX from 'react-img-ix';

const { TabPane } = Tabs;

const images = [
  {
    id: 1,
    src: 'https://example.com/image1.jpg',
    color: '#FF0000'
  },
  {
    id: 2,
    src: 'https://example.com/image2.jpg',
    color: '#00FF00'
  },
  {
    id: 3,
    src: 'https://example.com/image3.jpg',
    color: '#0000FF'
  }
];

const Example = () => {
  const [activeKey, setActiveKey] = useState('1');

  const handleChange = key => {
    setActiveKey(key);
  };

  return (
    <Tabs activeKey={activeKey} onChange={handleChange}>
      {images.map(image => (
        <TabPane
          key={image.id}
          tab={
            <ImgIX
              src={image.src}
              imgixParams={{ w: 50, h: 50 }}
              style={{ backgroundColor: activeKey === image.id.toString() ? image.color : 'transparent' }}
            />
          }
        />
      ))}
    </Tabs>
  );
};

export default Example;

3. 在渲染 tab 时，使用 react-img-ix 库的组件代替默认的 tab 名称，并为该组件设置样式来改变图片颜色。在样式中，判断当前选中的 tab 是否等于该图片的 id，如果是，则设置为该图片的颜色；否则设置为透明。

这样，当用户点击 tab 时，对应的图片将改变颜色。