Using React Toolbox for Material Design UI - The Right Way

With the many grid frameworks available nowadays, one of the newest exists as React Toolbox. With many responsive components present in it, it makes the UI development pretty easy. Isn’t that what all of us are looking for (EASIER)?!

Let’s start with the configuration of react-toolbox. One of the best articles present on the internet that provides a step by step guide to configuration of the React Toolbox is this. After the configuration is done, you will have two files — theme.css and theme.js inside a folder called toolbox.

Note: These are the files which contain the styles and the responsive code of the components of react-toolbox.

React Toolbox contains many components for UI development. The list can be found here. Remember: whenever you use a new component and you mention the component name in the package.json file, you should always run the command yarn toolbox. By running this command, the UI components get included in the theme.css and theme.js files.

Let’s get started by writing a simple code which uses react-toolbox components.

We’ll start with a basic Card component. For displaying the card as per the material design UI of react-toolbox, you will have to import the theme and ThemeProvider.

import theme from ‘./assets/react-toolbox/theme’;
import ThemeProvider from ‘react-toolbox/lib/ThemeProvider’;

For importing the card, you will have to do this —

import Card from ‘react-toolbox/lib/card/Card.js’;

Pretty simple, right?

Now, just go to your render(), and write this component in the return() of it.

<ThemeProvider theme={theme}>
 <Card className=’experts’>
 <CardTitle title={expertUSer.Name}
 subtitle={expertUSer.Designation}/>
 <CardText>{expertUSer.Country}</CardText>
 </Card>
</ThemeProvider>

Here I have stored data in an Object named ExpertUser. You can directly pass strings as well.

Also, remember to import every element that you use from react-toolbox.

import CardTitle from ‘react-toolbox/lib/card/CardTitle’;
import CardMedia from ‘react-toolbox/lib/card/CardMedia’;

Eg: <CardTitle title= “Aayushi here” subtitle=”react toolbox”/>

With react-toolbox, you can specify a class name to the card component and apply styles to it.

.experts{
  display: inline-block;
  width: 45%;
  justify-content: center;
  margin: 0.5em;
  padding: 0.3em;
}

With the style applied, the card will look like this

Isn’t it too black and white? Let’s try adding a text color to the card.

Now, let’s apply color:red to our experts class.

But what just happened, why is the color applied to the title and not the subtitle? And what if you want to use a different color for the subtitle?

Too many questions! If you try to look online, you will find numerous solutions like make a scss file or use data-react-toolbox tag, etc.

Here, I will give a you simple ES6 solution.

If you go through the theme.js, which is located in the assets folder, you will find the components that are bundled in your file like cardTitle, subtitle, title, etc.

Suppose you want to apply a different class to title and subtitle. For that, simply add this code to your theme.js using ES6 in your component.

<CardTitle 
 title={expertUSer.name}
 subtitle={expertUSer.designation}
 theme={{cardTitle:’cardTitle’,subtitle:’subtitle’}}/>

ES6 will add these json values to your theme.js file this way.

In your .css file, just add these things:

.cardTitle .title{
 color: red;
}
.cardTitle.subtitle{
 color:blue;
}

Here we are writing nested CSS, because the classes defined by us are getting added inside the default class provided by React Roolbox.

To learn more about ES6, visit this link.

Time to show the result!

You can apply the same rules to any component that you use from react-toolbox.

Team member: Dravya Shah

Happy coding!!