Material UI in React #3 — Styles — adding global theme and overriding default styles

This is the third part of the series. In this episode you will find out how to:

• add reusable Button component
• override MUI styles using sx prop
• add and customize global theme (so you’ll add global styles to Button, palette, define spacing and font families).

If you prefer, there’s a video version of the tutorial:

Reusable Button Component

We need to import the button from MUI website. So just go to the link attached below and copy the import Button line.

React Button component - MUI

Go back to your IDE and within the src/components/common add CommonButton folder, inside of it add the file with tha same name. Mock functional component using rafce shortcut, paste the import button line and you should end up with something like this:

If you look at the example dashboard that we would like to recreate (screen just below). You will quickly find that we can reuse CommonButton at least two times only on the authentication page ( Add user & Web setup buttons).

Go back to the button MUI website, scroll all the way down to the API’s link and open it up (alternatively click on the link attached below). This page contains available props and CSS API.

Button API - MUI

It’s time to add props to CommonButtoncomponent. We want to add:

• color — with this prop we can dynamically change color for our Buttons. Color is expecting a string, it displays primary as default.
• disabled — this might get handy with submit type of button inside of form validation (f.e. if form input’s are blank, then the user is unable to submit the form, once validation is sucesfull then set disabled to false). Disabled is expecting a boolean, it’s set to falseas default.
• size — we can control the size of the button. It’s expecting a string & by default it’s set as medium .
• variant — we can define what variant of the button we would like to use. It’s expecitng a string and it’s set to text as default.
• sx — the system prop that allows defining system overrides as well as additional CSS styles. It expects multiple values, it has no default value.

Once the props are added, you should have something similar to this:

Make sure your component name starts with a capital letter, not like mine lol!

Our reusable button component is done. We can import it in Authentication.js and play around with props. I just defined size and variant and added text as a children.

Now I will show you how to override default Button styles using sx prop.

Override MUI styles using sx prop

To existing CommonButton just add sx={buttonStyles} and right below the Authentication function we can create buttonStyles object and add some JSS. As I’ve been playing around with styles my buttonStyles looks like this now:

Now you know how to use the sx prop, so we can style out add user & web setup buttons accordingly to the dashboard example that we’re trying to follow. We need to duplicate CommonButton component and as you know they have completely different styles and that’s where we can use our variant props. One of them should be outlined where the other should be contained

I will skip the part of me adding the JSS to the buttonStyles object as I don’t think at this stage I should be explaining what fontSize or borderRadius does. JSS can be found just below:

So as you can see the buttonStyles object is targeting all buttons and there are some class selectors for button variants so I have different styles for contained and outlined btn.

Global Theme with MUI’s ThemeProvider component

This is very handy when you’d like to define the styles globally for your MUI components. You could also define new colors (using palette object), set or change media queries rules and much more.

To enable theming in your app visit the MUI theming (link below) and copy the ThemeProvider import line. Then go to index.js file and wrap it around your application

Theming - MUI

Once imported and wrapped it should look like this:

Then we should create a file where we can define our global rules. So in src/create a dashboardTheme.js file.

Head back to the MUI theming website and copy the createTheme import or just copy the line provided by me: import { createTheme } from "@mui/material/styles" Paste it in dashboardTheme.js Then we can copy a dummy global styling example from MUI’s website, so go to https://mui.com/customization/theme-components/ and copy the first code snippet, paste it into dashboardTheme.js .

Now change the const theme... to export const dashboardTheme By now your code should look like this:

This piece of code already sets the CSS rules for Button’s fontSize. It’s crucial to follow MUI’s documentation. To select and change component’s style, inside of your createTheme you have to define components object, then the name of the component, which in this case is the MuiButton then add styleOverrides object, then target the slot, for button it could be outlined or contained, but we’re going to flag the root slot and then finally you can add your JSS.

What’s left to do to make it work — we have to link the dashboardTheme with ThemeProvider . So go back to the index.js and just add theme={dashboardTheme} , make sure your dashboardTheme is imported. The line should look like this now:

Remember that we’re still using sx props to override styles for CommonButton component. SX props take precedence over global styles, so if the sx prop & global styles are present, the sx prop will always override global styles.

createTheme — palette

You can define different colors and override the MUI default’s primary or secondary colors with your own values.

Go back to your dashboardTheme.js and right after the components closing bracket add palette object, add main object inside and then nest the key primary and the hex value of your choice, I’ve used '#bada55` so your code should look like this now:

Now your button that has color="primary" will update it’s color.

If you wish to find out more about theming’s palette just visit the documentation page:

Palette - MUI

createTheme — font family

You can change the fontFamily, automate the responsiveness setup of your fonts or even adding self hosted fonts. But i’ll just keep it short here. In near future I am planning to drop a video dedicated to MUI fonts, so stay tuned.

Copy the array of strings with font names along with the typography.fontFamilies . This code snippet can be copied from https://mui.com/customization/typography/

Then just paste it back into your dashboardTheme , save and refresh your browser. Once you inspect the Button component you’ll notice that font family has been overwritten by new set of fonts. So your file should look like t his now:

createTheme — spacing

This is basically a helper to create consistent spacing between the elements. MUI is using recommended 8px scalling factor by default, but you can change it in your dashboardTheme

To find out more about spacing just visit:

Spacing - MUI

createTheme — breakpoints

The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them for controlling the layout of your application through the Grid component.

Not going to define breakpoints here, but if you wish to find out more about them just visit:

Breakpoints - MUI

That’s it! Now you know how to add global MUI theming to your app, override component’s styles using SX prop and how to add & customize a reusable button component.

In the fourth part of the series we’re going to:

• add & customize Header component
• create Notification system
• add reusable Menu component
• add conditional logics to display different title depending on the pathname

Each lesson is uploaded to Github so feel free to clone it:

https://github.com/theatypicaldeveloper/materialUi-in-react/branches