Adding a Theme in React to Change Element Colors and Text Font.

For this tutorial, we will use Material UI.

First, we install the necessary dependencies:

npm install @mui/material @emotion/react @emotion/styled

Now, let’s create our theme by creating a file named theme.tsx (I use TypeScript, you can create it in JavaScript)

In my case, I have set Roboto as the fontFamily and the colors to Teal.

Now, we need to apply our theme in our main file, in my case main.tsx

And our theme is applied and ready.

DevCodeLight