请问,如何使用ConfigProvider扩展antd的Tags增加额外的样式功能呢?

在基于antd的Tag组件
可以做自定义Tag:

import { ConfigProvider, Tag } from "antd";

type MyTagProps = {
    children: string,
    onClick: () => void 
}

const theme = {
    token: {
        /* 全局状态 */
        borderRadiusSM: 0,
        lineWidth: 0
    },
    components: {
    Tag: {
        /* 这里是你的组件 token */
        defaultBg: '#43ced6'
    },
    },
}

function MyTag(props: MyTagProps) {
    return ( 

        <ConfigProvider
            theme={theme}
            >
            <Tag onClick={props.onClick}>{props.children}</Tag>
        </ConfigProvider>
     );
}

export default MyTag 

效果也符合我们的预期:
image.png

但是如果想要对它增加一个选中与否的功能,
比如:
1)hover时候,背景色变化为浅绿色。
我尝试配置此Token参数:colorFillSecondary 无效。
2)点击选中,然后背景色变成绿色,再次点击就恢复原来状态

请问大佬们这样的需求是否能实现呢?

阅读 612
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题