How to style standard React components styling in MUI 5 - reactjs

Question

I'm trying to migrate my project from Material-UI v4 to MUI v5 using this How to customize guide from the official website but can't wrap my head how can I rewrite this component with the new guidelines:
...
const useStyles = makeStyles(() => ({
root: {
backgroundColor: "rgba(255, 255, 255, 0.36)",
display: "flex",
height: "100%",
position: "absolute",
textAlign: "center",
top: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
visible: {
visibility: "visible",
},
hidden: {
visibility: "hidden",
},
holder: {
height: 60,
width: 60,
},
}));
interface ILoaderBlockProps {
isLoading: boolean;
className?: string;
testId?: string;
}
type Props = ILoaderBlockProps;
const LoaderBlock: FunctionComponent<Props> = (props: Props) => {
const classes = useStyles({});
const { isLoading, className } = props;
const rootClasses = clsx(
classes.root,
isLoading ? classes.visible : classes.hidden,
className
);
return (
<div className={rootClasses}>
<div className={classes.holder}>
<CircularProgress color={"primary"}/>
</div>
</div>
);
};
...
Since makeStyles is deprecated and I have additional difficulties in MUI v5, I'm trying to stop using it but can't wrap my head around new styling yet.
How could these <div>s be rewritten in new, v5-way since makeStyles is no longer an option?
It seems the only way to do it is to introduce SCSS/CSS file with styles for root and holder.

Answer 1

Here's what I came up with (thanks #morganney for suggestion!):
...
const LoaderBlockRoot = styled("div")(() => ({
backgroundColor: "rgba(255, 255, 255, 0.36)",
display: "flex",
height: "100%",
position: "absolute",
textAlign: "center",
top: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
}));
const Holder = styled("div")(() => ({
height: 64,
width: 64
}));
const LoaderBlock: FunctionComponent<Props> = (props: Props) => {
const { isLoading } = props;
return (
<LoaderBlockRoot sx={{ visibility: isLoading ? "visible" : "hidden" }}>
<Holder>
<CircularProgress color={"primary"} />
</Holder>
</LoaderBlockRoot>
);
};
...
A bit clumsy for my taste compared to withStyles practices though, I wonder if this could be improved.
Also, I still don't know what to do if I want to override style of component (previously, it was doable by passing prop.className into component).

Answer 2

While the preferred way of styling in v5 is through styled or the sx prop, makeStyles still works. (Why do you say it's deprecated; it's in the v5 docs. You can even get rid of clsx by passing in the props directly into useStyles as shown in the docs example.) The code below works fine for me in v5.
As for overriding, it's still doable even with styled or sx prop. Just target the classname by using the component-slot class name convention (docs)
import { FC, useEffect, useState } from 'react'
import clsx from 'clsx'
import { makeStyles } from '#mui/styles'
import { CircularProgress } from '#mui/material'
const useStyles = makeStyles({
root: {
backgroundColor: 'rgba(255, 255, 255, 0.36)',
display: 'flex',
height: '100%',
position: 'absolute',
textAlign: 'center',
top: 0,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
visible: {
visibility: 'visible',
},
hidden: {
visibility: 'hidden',
},
holder: {
height: 60,
width: 60,
},
})
export const UseStyles: FC = () => {
const [loading, setLoading] = useState(true)
const classes = useStyles()
useEffect(() => {
setTimeout(() => setLoading(false), 3000)
}, [])
const rootClasses = clsx(
classes.root,
loading ? classes.visible : classes.hidden,
)
return (
<div className={rootClasses}>
<div className={classes.holder}>
<CircularProgress color={'primary'} />
</div>
</div>
)
}