React Rebass Theming

Last Updated : 07 Apr, 2025

React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know what are Props in React Rebass. Props are an important component that is required in each development. Theming is used to provide colors, typographic styles, layout styles, and component variants to our project. We can customize the theming of project components very easily by using the theme provider.

ThemeProvider: We will have to add a theme provider component to our project to give the theming.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install React Rebass and form components in your given directory.

npm i rebass

Step 4: To add the theme provider component we will have to install theme UI for our project. To install theme UI use the syntax given below:

npm i theme-ui gatsby-plugin-theme-ui

Step 5: Now to provide Custom theming we will use the theme provider component.

import { ThemeProvider } from 'theme-ui'

export default props =>
  <ThemeProvider theme={theme}>
     //Content
  </ThemeProvider>

Project Structure: It will look like the following:

Example 1: To provide them we will use an external fill named theme.js and export theme object from that file.

app.js

import React from 'react' import theme from './theme' import { ThemeProvider } from 'theme-ui' import {  Button , Text} from "rebass";  export default props =>   <ThemeProvider theme={theme}>     <div id="gfg">       <Text         fontSize={[3, 4, 5]}         fontWeight='bold'         ml="42%">         Geeksforgeeks       </Text>       <Button         sx={{           fontSize: 3,           margin: 20,         }}         color="white"         bg="green"         mr={3}         ml="40%"       >         LogIn       </Button>       <Button sx={{         fontSize: 3,         margin: 20,       }} color="white"         bg="blue" mr={3}         variant='outline'>         LogOut       </Button>       <Button         sx={{           fontSize: 3,           margin: 20,         }} color="white"         bg="red"         disabled="false">         Subscribe       </Button>     </div>   </ThemeProvider>

Theme.js

export default {     colors: {         background: 'black',         text: 'green',     },     buttons: {         primary: {             color: 'white',             bg: 'primary',         }     } }

Output:

Example 2: Using the default preset to give the theme, for installing the preset theme use the below command:

npm i @rebass/preset

Import the preset into the project.

import preset from '@rebass/preset'

app.js

import React from 'react' import { ThemeProvider } from 'theme-ui' import preset from '@rebass/preset' import { Box } from "rebass";  export default props =>     <ThemeProvider theme={preset}>         <div id="gfg">             <center>                 <br />                 <Box                     display='grid'                     bg='red'                     width={128}                     height={128} >                     Geeksforgeeks                 </Box>             </center>         </div>     </ThemeProvider>

Output:

Example 3: In this example, we will use internal object theming to give theme:

app.js

import React from 'react' import { ThemeProvider } from 'theme-ui' import { Box, Heading } from "rebass";  export default props =>     <ThemeProvider theme={{         colors: {             background: 'gray',             text: 'blue',         },         buttons: {             primary: {                 color: 'white',                 bg: 'primary',             }         }     }}>         <div id="gfg">             <center>                 <br />                 <Box                     display='grid'                     bg='red'                     width={200}                     height={200} >                     <Heading>                         GeeksforGeeks                     </Heading>                 </Box>             </center>         </div>     </ThemeProvider>

Output:

React Rebass Extending

taran910

Improve

Article Tags :

React Rebass Theming

Similar Reads

React Rebass Basics

React Rebass Guides

React Rebass Forms

React Rebass Recipes