React Rebass 扩展

React Rebass 是一个前端框架，其设计时考虑到了反应。在本文中，我们将了解 React Rebase 中的 Props 是什么。扩展是每个开发中都需要的重要部分。 Rebass 组件旨在用作设计系统开发中的构建块。通过扩展这些基本组件，您可以轻松构建具有一致 API 和样式的组件库，这些组件库由主题中定义的设计限制指导。

可以使用向 Rebass 组件添加样式技术来扩展 Rebass 组件，例如：

• SX 道具
• CSS 道具
• 变体
• 风格系统道具

句法：

让我们详细了解它们。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

第 3 步：在给定目录中安装 React Rebass 和表单组件。

npm i rebass
npm i @rebass/preset

项目结构：它将如下所示。

示例 1：在此示例中，我们使用sx属性来扩展 box 组件。

App.js

import React from "react";
import { Box } from "rebass";
import { Text } from "rebass";
  
const gfg = () => {
  return (
    

      
        Geeksforgeeks
      
      
        Coding
      
      
        Articles
      
      
        Web Development
      
    
  );
};
  
export default gfg;

输出：

示例 2：在此示例中，我们使用默认道具来扩展盒子组件。

应用程序.js

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import preset from '@rebass/preset'
import { Box } from "rebass";
  
export default props =>
    
        

            
                

                
                    GeeksforGeeks: A Computer Science Portal
                
            
        
    

输出：

参考： https://rebassjs.org/extending/