Two ways to customize material UI components...

Introduction

Material-Ui is a goggle's library for designing frontend of websites and webapps. Although I recommend using vanilla CSS. But for folks who are new to Material-UI customization can be a tricky part.

You can Customize material-ui in two ways.

• Global classes
• Custom classes

Global classes

The classes which are used globally through out the project are called global classes like primary, secondary, transitions etc.
You can find the material-ui global classes as an object in Default theme.

How to customize global classes

You can customize global classes by creating a custom object and wrapping it in <ThemeProvider theme={variable}></ThemeProvider>component. Please note that the object name should be same as Mui default theme object.

Example

const theme = createMuiTheme({
palette: {
primary: pink,
secondary: green
},

shape: {
borderRadius: 8,
},

});

export default function App()
{
<ThemeProvider theme={theme}>
<component1/>
<component2/>
.
.
.
<componentN/>
</ThemeProvider>

The above user defined theme object will override the material-ui theme.

Custom styling of the components

We can make custom objects for styling whatever we want without using predefined objects of material UI. We can use makeStyles hook for that.

Basically by providing values to the theme prop in makeStyles hook we style the components.

You can use your own names etc for styling. Then Everything wrapped up nicely in ThemeProvider component.

Example

const useStyle = makeStyles(theme =>({
root :{
height: --;
width: --;
background: ==
},

slider: {
...},

header: {
...}

//The above is custom template

export default function App()
{
const classes = useStyle(); //put function in classes variable to access the objects.

return(
<ThemeProvider theme={theme}>
<div className={classes.root}>
<div className={classes.header}/>
<div className={classes.slider}/>
</div>
)}