Customizing Material-UI components

Material-UI is a component library to make use of Material Design elements in React applications. In this tutorial, you’ll learn how to customize Material-UI components.

Material UI

1. Go to the API of the component you want to customize. Suppose, you want to customize the Button component. So Go the Button API first.
2. On the API page, you will find
   Component name [used to theme customization]
   Props [provide default options to customize]
   CSS [used for withStyle and classNesting cutomization]
   Inheritance [you can use the parent component’s props to customize]

In CSS section, there are columns named Rule name and Global class which is used for customization. you can check the default implementation for detailed information.

Customization using Props & Inline-style

You can easily customize any component using inline-style as it overrides all the CSS of the component. But the scope of inline-style is limited as it always applies to the root.

import React from "react";
import Button from "@material-ui/core/Button";
export default function InlineStyleButton({ children }) {
  return (
    <Button color="secondary" style={{ background: "#555" }}>
      {children}
    </Button>
  );
}

Customization using CSS [Rule name]

You can customize in a more expanded way using the CSS Rule name. There are several ways to do this.

withStyles

import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const WithStyledButton = withStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #9003fc 90%)",
    borderRadius: 3,
    border: 0,
    color: "white",
    height: 48,
    padding: "0 30px",
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)"
  },
  label: {
    textTransform: "capitalize"
  }
})(Button);
export default WithStyledButton;

withStyles Props

import React from "react";
import PropTypes from "prop-types";
import clsx from "clsx";
import Button from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
// We can inject some CSS into the DOM.
const classes = {
  root: {
    background: "linear-gradient(45deg, #03b6fc 30%, #FF8E53 90%)",
    borderRadius: 3,
    border: 0,
    color: "white",
    height: 48,
    padding: "0 30px",
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)"
  }
};
function WithStylePropsButton(props) {
  const { classes, children, className, ...other } = props;
return (
    <Button className={clsx(classes.root, className)} {...other}>
      {children}
    </Button>
  );
}
WithStylePropsButton.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
};
export default withStyles(classes)(WithStylePropsButton);

ClassNesting

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #031cfc 30%, #FF8E53 90%)",
    borderRadius: 3,
    border: 0,
    color: "white",
    height: 48,
    padding: "0 30px",
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)"
  },
  label: {
    textTransform: "capitalize"
  }
});
export default function ClassesNestingButton({ children }) {
  const classes = useStyles();
return (
    <Button
      classes={{
        root: classes.root, 
        label: classes.label 
      }}
    >
      {children}
    </Button>
  );
}

Customization using Component Name

We can use the Component name to customize the components. Here we override the Theme.

import React from "react";
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        color: "#000"
      }
    }
  }
});
export default function GlobalThemeOverride({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <Button>{children}</Button>
    </ThemeProvider>
  );
}

Customization using CSS [Global class]

You have to install styled-components to use the CSS Global class for customization.

import styled from "styled-components";
import Button from "@material-ui/core/Button";
const StyledComponentButton = styled(Button)`
  .MuiButton-label {
    color: green;
  }
`;
export default StyledComponentButton;

Customization Examples [ Javascript & Typescript ]

Here you will find examples of the process both in javascript and typescript. Open the sandbox and see the implementation.

customization examples using javascript

customization examples using typescript

So you can follow any of the above processes to customize material UI components. If you are interested more then go through the documentation. Happy coding.