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%">         Geeksforneveropen       </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} >                     Geeksforneveropen                 </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>                         neveropen                     </Heading>                 </Box>             </center>         </div>     </ThemeProvider> |
Output:
Reference: https://rebassjs.org/theming
