How to change Material UI components to match your app's design Part 1

Overview

Material UI components are designed to follow Google's Material Design guidelines and will look consistent across different platforms. Sometimes, however, you may want to adjust the colors of some elements to match your app's design or create an effect that doesn't have an obvious Material Design equivalent. In these cases, it’s often helpful to customize the components in some way. In this post, we'll walk through some common ways of changing the way Material UI components look on the Website.

So This will be Part 1, where I tell you about the sx prop, Actually I myself don’t know much about it cuz I haven’t used MUI v5 very much, I used to use the styled Component in V4, But when v5 came, I never thought of changing the MUI Component, I Just Copy and paste it or look for some online help if stuck anywhere.

Why

We can still use the Styled Components, then why learn all this?

1. Switching context wastes time.

When you define the Styled Components you have Switched from where you have defined them to where you have used them

2. Naming things is hard.

We all have gone through this problem of thinking of the right Selector Name, But while using the System Styles we don’t have to care about it.

The sx Prop

The sx prop is a shortcut for defining a custom style that has access to the theme.

Implementation

The sx prop can be used with

• Core Component
• Box (Renders as div)
• Custom Component

Usage

1) Using some Short Hands

m - margin
ml - margin-left
mr - margin-right
mb - margin-bottom
mt - margin-top

The same goes for Padding also - p, pl, pr, pb, pt

<Box
    sx={{
        p:1,  // By default theme spacing is 8px
        mt:2, // So Margin-top will be 16px
        mb:1
    }}

/>

2) Setting Breakpoints 🥚

<Box
    sx={{
        width:{
            xs:100   // Width at different breakpoints
            sm:200   // equivalent to 200px
            md:300
            lg:400
            xl:500
        },
        p:{
            xs:1  //equivalent to 8px
            md:2 //equivalent to 16px
        }
    }}

/>

As you can see we can easily define the width of the Div at different breakpoints using the sx props.

We can also skip some Breakpoints by using the null value.

3) Using Pseudo selectors & Nested Selectors:

<Box
  sx={{
    ":hover": {       // pseudo Selector
      boxShadow: 6,
    },

        "& .container__title":{  // Nested Selector
             border: 1  //equivalent to 1px solid black 
        }
  }}
>

Final Thoughts

When it comes to design, there are a lot of ways to customize Material UI components. You can use the built-in options, add your own CSS, or even override the styles completely. The best way to figure out what works for you is to experiment and see what looks best in your app. With a little bit of effort, you can make Material UI fit any design.

I know, I haven’t covered so much but in the next post, I will cover up.

Correct me in the Comment if I have said something incorrect 😊, I am also learning this.