example custom theme material ui with code examples

Customizing themes in Material UI is not only effortless but also highly configurable. Thanks to its theme setup, Material UI provides customization options for every element in its UI library. With a little bit of CSS, you can entirely change the look and feel of your application.

In this article, we will take a look at how you can create a custom theme in Material UI, and how to utilize it to theme your application to your liking.

Getting Started & Setup

To create a custom Material UI theme, we will need to install its core library. For this, we will use Node.js and npm.

Assuming you already have a project set up with React and Material UI, run the following command to install Material UI Core library:

npm install @material-ui/core

After this, we will create a theme.js file that will store our theme configuration. Inside this file, we’ll import createMuiTheme from @material-ui/core/styles.

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400',
    },
    secondary: {
      main: '#383838',
    },
  },
});

export default theme;

In the code above, we are exporting our custom theme, where we set up two colors to be used for the primary and secondary elements. The primary color will be #ff4400, and the secondary color will be #383838.

To implement this theme, we have to import it in our ‘App.js’ file and wrap our component with ThemeProvider from Material UI.

import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        // your component goes here
      </div>
    </ThemeProvider>
  );
}
export default App;

Once you’ve done this, your application will be using your custom theme.

Customizing the Theme

Now that your application has a custom theme set up, let's look at how to customize it with some CSS.

You can add CSS to your theme by adding a overrides: {} property to your createMuiTheme object.

Inside this overrides block, we can specify the different components that we’d like to customize. For instance, if we want to customize the color of the app bar and set its background to purple, we can add the following code:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400',
    },
    secondary: {
      main: '#383838',
    },
  },
  overrides: {
    MuiAppBar: {
      root: {
        backgroundColor: "purple"
      }
    }
  }
});

Similarly, we can customize individual components, such as Button by adding it to the overrides block. The following example demonstrates how to customize the Button text color and the hover color.

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff4400",
    },
    secondary: {
      main: "#383838",
    },
  },
  overrides: {
    MuiButton: {
      root: {
        padding: "10px 20px",
        margin: "5px",
      },
      textPrimary: {
        color: "white",
      },
      containedPrimary: {
        backgroundColor: "#383838",
        "&:hover": {
          backgroundColor: "#2B2B2B",
        },
      },
    },
  },
});

The above code adds padding and margin to Button components, sets the text color and background color to white and #383838, respectively.

You can customize the typography used in the Material UI components as well by importing the Typography component and specifying custom CSS inside the overrides block.

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff4400",
    },
    secondary: {
      main: "#383838",
    },
  },
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: "4rem",
        fontWeight: 700,
        lineHeight: 1.2,
      },
      h2: {
        fontSize: "3rem",
        fontWeight: 700,
        lineHeight: 1.2,
      },
      h3: {
        fontSize: "2.75rem",
        fontWeight: 700,
        lineHeight: 1.2,
      },
    },
  },
});

Conclusion

In this tutorial, we took a look at how to create a custom theme in Material UI and customize it with some CSS. We saw how to set up our custom theme in theme.js, and how to use it in our App.js file with ThemeProvider.

With Material UI’s easy-to-use theme setup, you can create a custom theme and add specific styles to different components with ease. I hope this tutorial has been useful in helping you get started and customize your Material UI application.

To expand on some of the previous topics, let's first take a closer look at the createMuiTheme function in more detail.

createMuiTheme

The createMuiTheme function is the core of Material UI's theme system. It allows you to create a custom theme object that can be used throughout your application.

The createMuiTheme function takes an object that has various settings including palette, typography, overrides, and props.

  • palette controls the colors used throughout your application
  • typography controls the typography (font) settings
  • overrides allows you to override specific components and styles
  • props allows you to define props for components with the option to set default values

Additionally, the createMuiTheme function can take an optional options object. This object allows you to control the default settings for various Material UI components, such as the default font family and font size.

Customizing Components

Material UI components are highly customizable. You can change everything from the colors and typography to component size and spacing.

For example, let's take the Button component. With just a few lines of CSS, we can customize its color, size, and font.

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        backgroundColor: "red",
        color: "white",
        fontSize: "20px",
        padding: "10px 20px",
        borderRadius: "5px",
      }
    }
  }
})

Here, we've set backgroundColor to red, color to white, fontSize to 20 pixels, added padding, and set a borderRadius.

You can customize pretty much any Material UI component in a similar way, just by targeting the correct class and setting the appropriate CSS properties.

Using Theme Variables

Another powerful feature of Material UI's theme system is the ability to use theme variables in your CSS.

For example, let's say you want to use the primary color throughout your application, but also have different shades of that color. You can define the primary color in your theme object and reference it using the theme.palette.primary variable.

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#4F6C9B",
      lighter: "#7381A9",
      darker: "#3F587F",
    },
    secondary: {
      main: "#FFBB33",
    },
  },
  overrides: {
    MuiButton: {
      root: {
        backgroundColor: theme.palette.primary.main,
        color: "white",
        "&:hover": {
          backgroundColor: theme.palette.primary.darker,
        },
      },
    },
  },
});

This allows you to easily change the primary color across your entire application by just changing it in your theme object.

Conclusion

In conclusion, Material UI provides a powerful and flexible theme system for customizing the look and feel of your application. With just a few lines of CSS, you can completely change the appearance of Material UI components. Additionally, the ability to use theme variables makes it easy to keep your styles consistent throughout your application.

Popular questions

  1. What is createMuiTheme in Material UI?
  • createMuiTheme is a function that allows you to create a custom theme object in Material UI. It takes an object that has various settings including palette, typography, overrides, and props.
  1. How can you customize Material UI components?
  • Material UI components can be easily customized by targeting the correct class and setting the appropriate CSS properties. For example, the Button component can be customized by setting its color, size, font, spacing, and borderRadius.
  1. What are theme variables?
  • Theme variables are values defined in the theme object that can be accessed and used in your CSS. This allows you to keep your styles consistent throughout your application by referencing the same variables across different components and styles.
  1. How can you use ThemeProvider in Material UI?
  • ThemeProvider is a component provided by Material UI that allows you to wrap your application with a custom theme. You pass your custom theme object as a prop to the ThemeProvider, and all Material UI components within that component tree will use this theme.
  1. What is the purpose of overrides in createMuiTheme?
  • overrides is a property of the createMuiTheme object that allows you to override specific components and styles. You can customize the look and feel of almost any Material UI component in this way, by targeting the correct class and setting the appropriate CSS properties.

Tag

CodeThemes

As a senior DevOps Engineer, I possess extensive experience in cloud-native technologies. With my knowledge of the latest DevOps tools and technologies, I can assist your organization in growing and thriving. I am passionate about learning about modern technologies on a daily basis. My area of expertise includes, but is not limited to, Linux, Solaris, and Windows Servers, as well as Docker, K8s (AKS), Jenkins, Azure DevOps, AWS, Azure, Git, GitHub, Terraform, Ansible, Prometheus, Grafana, and Bash.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top