How to write a custom CSS in Material UI Part-1
In this blog we are learning how to write custom CSS in Material UI component. But before knowing this, we should know about material UI.
Material UI is an open-source, front-end framework for React components. It is built using Less. Less (stands for Leaner Style Sheets), is a backward-compatible language extension for CSS.
It provides pre build component likes Button, Text field and many more. You can go to check its official website for more info: - https://mui.com
Now we will talk about our topic custom CSS
First of all, we are not able to add external CSS file. We are adding external CSS file in the case of html like this :-
But in material UI, we have to create our higher order component using makeStyles. makeStyles is the primary method for wrapping a component and passing style props to it.
Let’s see how to use makeStyles hooks in react :-
In this code we are writing a custom CSS with the help of makestyles hook.
Here, we will create a variable named useStyles and assign a hook to the useStyles variable and then we will write CSS code in JavaScript object form like this :-
Then we will pass useStyles variable in our main component, assign the useStyles function in other variable where its name is classes.
Now we are ready to assign classes in our material UI component like this :-
Let see how the output of this makeStyles custom CSS looks like :-
This is part 1 of the material UI custom CSS blog. We will post more about custom css in Material UI in the next part of the series of this amazing topic.
Very helpful.
Leave a Reply