How override Mui v5 styles with makeStyles in MUI Material UI

Explanation of the problem

A migration was performed from version 4 to version 5 of a software. Components were styled using makeStyles, however, in version 5, the original Material-UI styles have taken priority and are overriding the styles defined in makeStyles. Despite conducting research and attempting to utilize the StyledEngineProvider, the issue persists.

The application employs server-side rendering (SSR) and for demonstration purposes, a code sandbox is available at the following URL: https://codesandbox.io/s/hook-material-demo-forked-l7wwu.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for How override Mui v5 styles with makeStyles in MUI Material UI

To override Material-UI v5 styles with makeStyles in Material UI, you can use the overrides property in your theme. The overrides property allows you to overwrite specific styles within Material-UI components.

Here is an example of how to override the styles of a Button component:

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

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        backgroundColor: 'red',
        '&:hover': {
          backgroundColor: 'blue'
        }
      }
    }
  }
});

const useStyles = makeStyles({
  root: {
    backgroundColor: 'green',
    '&:hover': {
      backgroundColor: 'yellow'
    }
  }
});

function MyButton() {
  const classes = useStyles();

  return <Button classes={{ root: classes.root }}>Click Me</Button>;
}

In this example, the overrides property in the theme is used to change the background color of the Button component to red. The makeStyles hook is then used to further modify the Button styles with a different background color (green) and hover state (yellow).

When using this approach, the styles defined in makeStyles will take precedence over the overrides in the theme. In this way, you can effectively override Material-UI v5 styles with your own custom styles using makeStyles.

Other popular problems with MUI Material UI

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

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        backgroundColor: 'red',
        '&:hover': {
          backgroundColor: 'blue'
        }
      }
    }
  }
});

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

import { List } from '@material-ui/core';
import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
  return (
    <List>
      <FixedSizeList
        itemCount={items.length}
        itemSize={50}
        height={300}
        width='100%'
      >
        {({ index, style }) => (
          <div style={style}>
            {items[index]}
          </div>
        )}
      </FixedSizeList>
    </List>
  );
}

In this example, the FixedSizeList component from react-window is used to create a virtualized list that only renders the items that are currently visible on the screen. The itemCount prop specifies the total number of items in the list, the itemSize prop specifies the height of each item, and the height prop specifies the height of the list.

A brief introduction to MUI Material UI

Material-UI is a popular open-source UI library for React that provides a wide range of pre-built components designed to meet the needs of modern web applications. Material-UI components are built using Material Design, a visual language created by Google to provide a consistent user experience across all devices and platforms.

Material-UI provides a wide range of components, including basic UI elements like buttons, text fields, and sliders, as well as more complex components like tables, dialogs, and progress indicators. Material-UI also provides a range of customization options, allowing developers to easily change the appearance of components to match the look and feel of their applications. Additionally, Material-UI provides built-in support for responsive design, ensuring that applications built with Material-UI look and work great on a range of devices and screen sizes.

Most popular use cases for MUI Material UI

1. Building Responsive Web Applications: Material-UI provides a wide range of pre-built components that are designed to be responsive, ensuring that applications built with Material-UI look and work great on a range of devices and screen sizes. This helps developers save time and effort in building applications that look great and work well on all types of devices.
2. Implementing Material Design Guidelines: Material-UI is built using Material Design, a visual language created by Google to provide a consistent user experience across all devices and platforms. By using Material-UI, developers can easily implement Material Design guidelines in their applications, ensuring a consistent and polished look and feel for their users.
3. Customizing Component Appearance: Material-UI provides a wide range of customization options, allowing developers to easily change the appearance of components to match the look and feel of their applications. This can be done through the use of CSS, and in some cases, the use of JavaScript.

Example:

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

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    padding: theme.spacing(2),
  },
}));

function MyButton() {
  const classes = useStyles();

  return (
    <button className={classes.root}>
      Click Me
    </button>
  );
}