在基于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
效果也符合我们的预期:
但是如果想要对它增加一个选中与否的功能,
比如:
1)hover时候,背景色变化为浅绿色。
我尝试配置此Token参数:colorFillSecondary 无效。
2)点击选中,然后背景色变成绿色,再次点击就恢复原来状态
请问大佬们这样的需求是否能实现呢?