AddButton 组件封装如下 "react": "^18.2.0", "antd": "^5.15.1", "antd-style": "^3.6.2", SvgIconComp 组件链接 https://www.codefather.cn/essay/1897849299510984706 import { memo } from 'react'; import { Button } from 'antd'; import { createStyles, cx } from 'antd-style'; import SvgIconComp from '@/components/SvgIcon'; const useStyles = createStyles(({ token }) => ({ buttonContent: { display: 'flex', alignItems: 'center', color: token.colorTextLabel, }, text: { marginLeft: 6, }, button: { ':hover': { backgroundColor: `${token.colorPrimaryBgHover} !important`, }, }, })); const AddButton = (props) => { const { styles } = useStyles(); const { disabled, title } = props || {}; return ( <Button size={'small'} type={'text'} {...props} className={styles.button}> <div className={styles.buttonContent}> <SvgIconComp iconName="autamate/addDesc" /> <div className={cx(styles.text, disabled && 'disabledstyle')}>{title || '添加'}</div> </div> </Button> ); }; export default memo(AddButton);