I started using Material UI, styled-components for React; Get Inspired to create designs for your application

Alright, in this blog post I think I want to talk about my current styling solution for React projects.

In a recent blog post, I shared how I organize my CSS for React, and that received a decent amount of likes so I want to make another post about styling.

Since then, I’ve changed up a lot of how I style my components so I think this could be very helpful to some of you.

So then, I’ll just jump right into it.

Material UI: A good starting point

In my current project that I’m working on for an internship, I’m using Material UI as my main styling solution.

Initially, I didn’t like Material UI because it seemed very rigid. I thought that all the components came pre-packaged, and MUI components only offered a few customizations. This is partly true. Using only the MUI component’s Props, there are only a few options to customize, but you can easily write your own CSS to create the EXACT look that you need.

And oftentimes, you will have to write your own CSS for MUI components.

If MUI components need to be tweaked with CSS pretty frequently, why not just start from normal HTML elements and only use CSS? Well, I think that MUI components offer a good starting point for the component that you’re trying to create. For example, the default Html button is absolutely horrendous, and to get to a simple clean button you need to write a decent amount of CSS.

Picture of styled button:

I just tried creating a simple button from the normal HTML button element. Contrary to how I thought, it didn’t take me too long (I remember the default button element looking a lot uglier), but this doesn’t include any of the :hover styles that MUI’s button component comes with.

In any case, it might be better to start with a template like MUI and then tweak it down to the exact look you need. And occasionally, the default MUI components will be good enough for what you’re trying to build.

How to use Material UI

Here, I want to talk about briefly how I use MUI’s components and their accompanying documentation.

For installation and getting set up, check out the Getting Started Section in Material-ui.com

1. First, check out the “Components” section for examples of the type of component you want to build e.g. Form, Navigation bar, etc.
2. If you can find the exact look you need in the demo for a component, great, just use that.

2. If you need more options, check out the API for a component you need to customize. On the API page, you’ll be able to see a full list of the props you can select from.

3. Finally, if the Props and demo examples aren’t enough, write your own CSS for the component.

Example of a MUI Button with my own CSS:

4. If the component is a little more complicated, you may need to dig around in the DOM to find out the className of the element you want to tweak.

Example:

This is what the DOM renders when you use a TextField component.

If you need to write CSS for the label within that TextField component, you can use a nested selector to target that element like this:

My Favorite MUI components

Some MUI components that I have been using a lot

• Button
• Modal (pop up window for “are you sure you want to ”)
• Snackbar (small little box of text that appears after an action e.g. “User Deleted ”)
• DATAGRID (super useful, fully customizable table)
• Paper (a container with a clean box-shadow)

Stop creating individual CSS files for all your components and use MUI’s makeStyles hook or use “styled-components”

Previously, I organized my React styles using individual SCSS files for each component.

After using MUI’s makeStyles hook (an in-component styling solution) for some time, I found makeStyles a convenient way to add styling to my components.

Here’s a simple example of how to use makeStyles. It’s pretty straightforward.

You declare all the classNames in an object using makeStyles. Then, you can access the classNames using the hook created from makeStyles.

Why do I like this method of styling over having individual CSS files for components?

1. You can’t accidentally use CSS written for some other component.
   Here, the CSS written for Button.js gets applied to my MyOtherButton component, which at first may seem convenient, but in the future, it makes it more difficult to track down where styles for a component are being applied.
2. Secondly, CSS selectors are much more manageable because they live in the same file as components. To check if a CSS modifier is used, you simply ctrl + f classes.whateverProperty. If nothing comes up, you can delete the modifier.
3. Lastly, (this is more subjective) components and their styles should be very closely tied together. It doesn’t make sense to have a separate file that we look at to understand how a component is styled. When you look at a real object, like a pencil, you don’t check a reference sheet (pencil: length: 6 in, shape: hexagonal prism, …) to understand what the object looks like, you just look at the pencil. Just like how a pencil’s physical properties are bound to its matter, a component’s style should be very closely associated and should live very close to the component.

styled-components

Shortly, after using MUI’s makeStyles I found out about styled-components. It’s a very popular styling solution and creates a very unique, modular way to style components. You should definitely check it out. I won’t be going over it to keep this post short, but it’s becoming my favorite way to style components.

Why you should use styled-components:

• Use a component’s props to situationally apply styles
• Extend a component’s style very easily
• Supports theming
• Very easy to add CSS to a component (a styled-component)
• MUI’s styling solution was heavily inspired by styled-components.

Theming with MUI

Theming is a convention of styling where a rule set is pre-determined and components choose styles from those set of rules. Rules can include Font family, a set of font sizes to be used in your application, a set of colors or a “palette”, or whatever you want to include.

It’s very useful to have one central place where I determine a ruleset for my styles. Later on, if I want to tweak a color used app-wide, I can do it by changing the theme.

Here’s how I’m using themes with MUI. I have a theme file where I define the styling rules. I import that into index.js and use MUI’s ThemeProvider to provide the theme to my application. makeStyles can easily access the provided theme in the hook creation, and if I want to use styled-components, I can import the theme.js file and use the MUI theme in my styled-components.

Theming is very much similar to using SASS and creating variables for things like color, and such, but I never really took the time to write out those variables, so I’m finding themes to be very useful. Theming also makes my application feel more consistent. Without an app-wide set of rules, the styles feel more loose, like some Wild Wild West of styles: every component seems to arbitrarily choose its own specific styles. With a theme, I feel like the components I create are held together by the set of styling rules.

BEM

Lastly, I’m still experimenting with BEM syntax in order to keep my classNames semantic.

Before you start styling your component, look for inspiration

And one more thing before I go. Before you start styling/designing your application, get inspired first.

When you want to build a Login page, for example, look at how other websites like Facebook or Reddit created theirs. Look around for inspiration and find one you really like, and build one similar to that.

I’m not saying don’t try to innovate and be creative, but there’s a lot to learn from looking at the way other people have designed their websites.

Check out the DOM and investigate how they styled their components!

And this goes without saying, don’t just outrightly copy people though. Try to change it up a little and make your apps look unique. If you do end up creating a very similar look, I think it’s nice when people are upfront about it.

Here’s a side project that I’m working on that’s basically a text editor and entry organizer for Medium. I drew a lot of inspiration from Evernote, one of my favorite journaling applications and also from Google Doc’s which I use a lot too.