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
Problem: Overriding Material-UI Styles
Material-UI is a popular React UI library that provides a set of pre-designed components. However, in some cases, users may want to modify or customize the styles of these components to better fit their specific needs. Overriding Material-UI styles can be challenging for users who are unfamiliar with the library’s design and implementation.
Solution:
To override Material-UI styles, you can use the overrides
property in your theme. The overrides
property allows you to overwrite specific styles within Material-UI components. Here’s an example of how to use the overrides
property to change the background color of a Button
component:
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'blue'
}
}
}
}
});
Problem: Inconsistent Styling Across Different Browsers
Material-UI provides a consistent look and feel across different browsers and platforms. However, in some cases, users may still experience inconsistent styling between browsers due to differences in their CSS support. This can lead to unexpected results, such as different font sizes, spacing, and colors between browsers.
Solution:
To ensure consistent styling across different browsers, you should consider using CSS reset styles. A CSS reset style removes the default styling of elements provided by different browsers. This helps ensure that your components have a consistent appearance across all browsers. Here’s an example of a simple CSS reset style:
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;
}
Problem: Slow Performance with Large Data Sets
Material-UI provides a set of highly optimized components for building user interfaces. However, when working with large data sets, the performance of these components can become an issue. This is due to the fact
Solution:
To optimize the performance of Material-UI components with large data sets, you should consider using a virtualized list. A virtualized list only renders the items that are currently visible on the screen, rather than rendering the entire list at once. This can greatly improve the performance and responsiveness of your application.
Here’s an example of how to use the List
component from Material-UI with the react-window
library to create a virtualized list:
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
- 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.
- 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.
- 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>
);
}
It’s Really not that Complicated.
You can actually understand what’s going on inside your live applications.