Skip to content
Related Articles

Related Articles

React Rebass Theming

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Nov, 2021
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!