React Rebass 按钮组件

React Rebass 是一个基于 React 开发的组件库，提供了丰富的组件和样式，使得我们能够快速开发出美观、高效的 Web 应用。其中，Rebass 按钮组件是其中比较常用的一个组件之一。

安装

npm install rebass

使用

在 React 组件中，我们可以通过引入 Rebass 按钮组件并设置不同的参数来快速生成各种样式的按钮。

示例代码

import React from 'react';
import { Button } from 'rebass';

const MyButton = () => {
  return (
    <Button
      bg="primary"
      color="white"
      mr={2}
      fontSize={2}
      px={3}
      py={2}
      borderRadius={3}
    >
      立即预约
    </Button>
  );
};

属性

| 属性名 | 类型 | 默认值 | 描述 | | --------------- | ---------- | ------ | ---------------------------------------------- | | variant | string | null | 按钮的类型，可选值有outline, ghost等 | | size | string | null | 按钮的尺寸，可选值有small, medium, large | | disabled | boolean | false | 是否禁用按钮 | | onClick | function | null | 按钮点击事件的回调函数 | | sx | Object CSS | {} | 自定义样式 | | 其他 HTML 属性 | - | - | 可以传入其他 HTML 属性 |

基本样式

Rebass 按钮组件提供了一些基本的样式，如下所示：

<Button>默认</Button>
<Button variant="primary">主要</Button>
<Button variant="secondary">次要</Button>
<Button variant="outline">轮廓</Button>
<Button variant="ghost">没有背景颜色</Button>
<Button variant="link">链接</Button>

自定义样式

除了提供了基本样式之外，我们还可以通过设置 sx 属性来自定义样式。

<Button
  sx={{
    backgroundColor: 'red',
    borderRadius: '0.2rem',
    color: 'white',
    padding: '0.5rem 1rem',
  }}
>
  自定义样式
</Button>

结尾

Rebass 按钮组件是一个非常实用和灵活的组件，可以让我们快速创建出符合设计要求的按钮。如果您对 Rebass 有兴趣，可以阅读其文档并尝试使用其他组件。