How to make your own theme with React Bootstrap

Ever wanted to create your own theme? Inside our company ShoutOUT, we have a couple of products and we need to maintain consistency between products. So we thought of creating our own React theme with necessary components which can be consumed inside our products. We have used React Bootstrap for this.

Following is how our project structure looks like. Inside the components, we have the component's logic and inside the themes folder, we have different bootstrap themes.

Project structure

Following is the main export script (index.js). As you can see we import the custom components from the components folder and export them. Also, we export all other non-customized React Bootstrap modules from React Bootstrap.

export script

To create this theme we used 4 different kinds of components.

1. React Bootstrap components which do not need any changes
   Eg: Row, Col
   Just import them from React Bootstrap and export inside the main export script.
2. React Bootstrap components which need them as it is with own default class names and minor property updates
   Eg: Button — we only want to change default class names.
   Create a component inside the components folder and override the default properties.

Override default class names of button

3. New components made using different React Bootstrap components
Eg: Alert Box component which used React Bootstrap Model and Buttons

Create a custom component inside the components folder. Import necessary React Bootstrap modules and export the component from the main export script.

4. Non React Bootstrap 3rd party components
Eg: DateTime picker

Third-party libraries. Follow the steps for types 1,2,3 with import them from the relevant libraries.

That’s it. Comment if you have any questions. Happy to answer.