Material UI 1.0 with Styled Components

Material UI 1.0 brings with it huge styling flexibility compared to its predecessor. For starters, now you can easily theme and style the components by passing props like this:

This simple requirement used to be a big pain in the previous version of Material UI. Not only that, but it is also much easier nowadays to combine Material UI with Styled Components.

Let's demonstrate how easy it is to style an AppBar.




In this example we are basically styling the default Material UI AppBar component by doing a styled Button and a styled Typography component. Additionally, I am giving a nice blue color to the AppBar by passing the color prop. The resulting AppBar will look like this:

About my coding environment

People often ask me about my environment setup, specifically the IDE and the themes that I use.

I currently use VS Code, which I prefer over other IDE's that I have used in the past (including vim, Sublime, Atom and IDEA). The reasons are predominantly due to its large community base and being very lightweight, fast and extremely hackable.

I use the Oceanic Next Italic (White) theme as it provides a pleasant dark interface that allows me to code for long hours without straining my eyes. This theme also exposes italic elements that can be leveraged using specially engineered fonts. Since I don't afford to spend $600 on a font like Operator Mono, I have built my own custom font using FontForge, based on Fira Code and Script12-BT.

The result of my setup looks something like the below:

Choose an SSH key to push to your Git repository

Usually Git assumes that you are using your default SSH key if you want to push to a secure Git repo. However this is not always the case and you might want to choose specific keys for specific repos. How can you do it? Simply through the following environmental variable: