Open In App

React Rebass Theming

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Reference: https://rebassjs.org/theming



Last Updated : 30 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads