Prerequisite

This story is recommended for people who already had experience with React Material-UI. For those who haven’t try it, please check it out.

Moreover, this story mostly points to styling section so you need to be a bit familiar with how Material-UI styling works.

Shall we start?

Material-UI uses JSS for styling which intimidates a lot of developers when they first use it (me too). However, after I have been using it for a couple of years I started to see the advantages. I think it is good to start with the pros and cons of Material-UI styling (in my opinion).

Pros

The component is very well-structured with CSS-API which is great for building long-term component (if you code it the right way, haha)

It is not too easy to change styles compare to pure CSS, SCSS.

Cons

Overriding and Customizing is very hard for beginners.

It is not possible to style nested components within the parent. (CSS can)

Now, I want to focus on the nested component problem.

To give you a clear picture, let’s see this example. I want to make this menu option component by composing two components that I already have [Option (Parent) & Chip (Child)]. The condition is when Option is hovered, it should have a blue background with white text, Chip should have a darker background with white text too.

It is sounds simple and easy if you build it from scratch. But if you already have the Chip component on the right and you want to compose it with the Option, it is not that easy.

#1st Attempt

let’s try customizing it.

The problem is Child will receive other styles from Parent and you need to specify the correct CSS API that Child accepts, otherwise, you get a warning. Moreover, if you use Parent as a nested component in other components. Imagine classes structure that you need to pass through Parent to Child .

Let me explain why the code above is not good if you want to create a sustainable component.

Firstly, Child listen to its own styles and it shows perfectly on the screen.

Child has its own styles.

Secondly, it is used as a nested component in Parent . Parent also has its own styles.

3. You try to custom Child styles when you hover on Parent , Child get extra styles and will get more if Parent becomes a nested component. classes become more complicated and not scalable.

The solution

#2nd Attempt

I came up with an idea. What if we combine Child styles with Parent styles and then pass it to Child component.

Hola, it works because we can now control Child based on Parent ! but because Child still listen to its own styles, there are duplicate styles in Child

Duplicate styles in Child

#3rd Attempt

Tell Child that if it acts as nested component, stop using its own styles. This is what we got.

The Parent + Child component at 3rd attempt

Congratulations! you have completed the idea of this approach.

Parent can still be used as nested component. Ex. something like this

Now, Root can customize Parent & Child within its own scope.

At this point, you might say “I get your idea but I want the code, man”

I understand and after I prove this concept, I created this

yarn add mui-styling

I am gonna show you how to use it here because it is too much but you can read more about it at this repo

short explanation, mui-styling extends withStyles from material-ui to provide better ux for developers and help them build sustainable components.

Summary