怎么用chakraUI生成一个button的类组件并且指定CSS式样

Chakra UI 是一个基于 React 的 UI 框架，它提供了丰富的、易于使用的组件库，包括按钮（Button）。要使用 Chakra UI 生成一个自定义的 Button 类组件，并指定 CSS 样式，你可以按照以下步骤操作：

1. 首先，安装 Chakra UI 和它的样式库，可以运行以下命令：

   npm install @chakra-ui/core @emotion/react @emotion/styled

2. 创建一个新的 CSS 文件（例如 `MyButton.css`），并在其中定义你的样式：

   .my-button {
     background-color: #007bff;
     color: white;
     border-radius: 4px;
     padding: 8px 16px;
     cursor: pointer;
   }

3. 在 React 中创建一个名为 `MyButton.js` 的文件，编写类组件：

   // MyButton.js
   import { Box, Button as ChakraButton } from '@chakra-ui/core';
   import styled from '@emotion/styled';

   const CustomButton = styled(ChakraButton)`
     ${/* 这里导入并应用你的 CSS 样式 */}
     @import './MyButton.css';
   `;

   export default function MyButton() {
     return (
       <CustomButton variant="solid" size="lg" onClick={() => alert('Button clicked')}>
         Click me
       </CustomButton>
     );
   }

在这个例子中，我们使用了 `styled` 函数将 Chakra UI 的 `Button` 组件包裹起来，并导入了自定义的 CSS 样式。

现在，`MyButton` 就是一个拥有自定义样式的 Chakra UI Button 类组件，可以直接在其他组件中使用。