能再具体一点给一个，，封装chakraUi的button按钮的例子么，要求保留原有接口

当然，下面是一个更具体的例子，展示了如何封装Chakra UI的`Button`组件，并保留其原有的接口，同时添加了一些固定的样式：

import { Box, Button, useColorModeValue } from "@chakra-ui/react";

// 定义CustomButton组件
const CustomButton = ({ 
  // 接收Button的所有props，包括但不限于：text, variant, size, color, onClick
  text = "点击我",
  variant = "solid", 
  size = "lg",
  color = "blue.500",
  bg = useColorModeValue("white", "gray.800"),
  hoverBg = useColorModeValue("gray.100", "blue.100"),
  ...buttonProps
}) => {
  const handleClick = (event) => {
    if (typeof buttonProps.onClick === "function") {
      buttonProps.onClick(event);
    }
  };

  return (
    <Box
      as="a" // 如果需要保持点击效果，可以使用as属性
      display="inline-block"
      textDecoration="none"
      cursor="pointer"
      color={bg}
      backgroundColor={bg}
      transition={`background-color ${0.3}s`}
     :hover={{ backgroundColor: hoverBg }}
    >
      <Button
        variant={variant}
        size={size}
        color={color}
        onClick={handleClick}
        {...buttonProps} // 传入剩余的prop
      >
        {text}
      </Button>
    </Box>
  );
};

// 使用CustomButton组件
<CustomButton text="我的自定义按钮" variant="primary" size="xl" onClick={() => console.log("按钮被点击")} />

在这个封装中，`CustomButton`接收了`Button`的大部分props，如`text`, `variant`, 等，同时还增加了`bg`和`hoverBg`这两个新的CSS变量来控制背景色。当用户悬停时，背景色会发生改变。