怎么将chakraUi当中的Button组件再封装。要求保留原有props基础上，固定css样式

在Chakra UI中，如果你想封装`Button`组件并保留原生的prop，同时添加固定的CSS样式，可以按照以下步骤操作：

1. 首先，在Chakra UI库中引入`Box`和`Button`组件，因为通常会使用`Box`作为基础容器来组合样式和内容。

import { Box, Button } from '@chakra-ui/core';

2. 创建一个新的React组件，比如叫`CustomButton`，它接受原始`Button`的所有props，并在内部使用它们：

const CustomButton = ({
  children,
  variant = 'solid',
  size = 'md',
  colorScheme,
  ...rest
}) => {
  return (
    <Box display="inline-flex" alignItems="center" fontSize="sm" px={4} py={2} borderRadius={2}>
      <Button {...rest} variant={variant} size={size} colorScheme={colorScheme}>
        {children}
      </Button>
    </Box>
  );
};

这里我们覆盖了默认的`display`, `alignItems`, 和一些通用的间距(`px` and `py`)，以及`fontSize`。`...rest`用于传递所有未命名的属性到内嵌的`Button`组件。

3. 添加额外的固定CSS样式可以直接在`Box`元素上定义，例如更改背景颜色、边框宽度等，如果需要的话：

<Box background="gray.500" border="1px solid gray.300" borderColor={colorScheme === 'white' ? 'gray.800' : 'gray.200'}>
  {/* ... */}
</Box>

现在，你可以像使用普通`Button`一样使用`CustomButton`，并且它的样式已经被固定了。