chakraUi怎么用theme来自定义button的CSS样式

Chakra UI是一个基于React的UI组件库，它允许开发者通过主题（Theme）系统来定制组件的外观，包括按钮（Button）。首先，你需要设置全局的主题，然后可以针对特定组件如Button进行自定义。

1. 安装并引入Chakra UI：

   npm install @chakra-ui/core

或者如果使用 yarn：

   yarn add @chakra-ui/react @chakra-ui/system

2. 设置全局主题 (通常在`theme.config.js`或`.css`文件中)：

   import { createTheme } from '@chakra-ui/core';

   const theme = createTheme({
     colors: {
       primary: '#007bff',
     },
     components: {
       Button: {
         variants: {
           solid: {
             background: 'primary',
             color: 'white',
             _hover: { background: 'primary.500' },
           },
         },
       },
     },
   });

   export default theme;

这里设置了Button的基本样式和 hover 状态。

3. 在React组件中使用自定义主题：

   import { Button, ThemeProvider } from '@chakra-ui/core';
   
   function MyComponent() {
     return (
       <ThemeProvider theme={theme}>
         <Button variant="solid" colorScheme="teal">
           Custom Button
         </Button>
       </ThemeProvider>
     );
   }

`variant`属性用于选择预设样式，你可以根据需要调整颜色、背景等。