What is the best way to use sx prop in MUI v5? - reactjs

Question

I have started using MUI v5 with makeStyles in my previous project. After deploying, I faced a huge delay in loading page's CSS. So I started searching that found out makeStyles is deprecated in MUI v5.
MUI suggests to use sx prop instead. That's fine. But the problem here is I don't want to write my JSX and CSS/JSS code together. For example:
This is what MUI says:
// App.js
function App() {
return (
<Grid sx={{ bgcolor: 'yellow', mx: 5, pt: 2, border: 1 }}>
This is a test!
</Grid>
);
}
export default App;
Below is somehow what I expect:
// style.js
export default {
myGrid: {
bgcolor: 'yellow',
mx: 5,
pt: 2,
border: 1,
},
};
// App.js
import style from "./style";
function App() {
return <Grid sx={style.myGrid}>This is a test!</Grid>;
}
export default App;
I wanna know what is the best pattern to use JSS and JSX files independently with sx? Is it possible to get VSCode suggestions while typing sx props in another file?

Answer 1

You can achieve this with TypeScript. If TypeScript is not already configured in your project, you would have to add it (see this SO answer for help with that).
Then you can make a styles.ts file with all of your component styles by using the SxProps type.
// Styles.ts
import { SxProps } from '#mui/material'
const myGrid: SxProps = {
bgColor: 'yellow',
mx: 5,
pt: 2,
border: 1
}
export default { myGrid }
By using the SxProps type on your stlye object, you'll get code completion with all of the MUI sx props.

Answer 2

Check this out :) We can store styles in a single object.
Use Record<Keys, Type> to define parent object type.
After that you'll get suggestions when you typing keywords. etc: backgroundColor
https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type
//styles.ts
import { SxProps, Theme } from "#mui/material";
export const navBarStyles: Record<string, SxProps<Theme> | undefined> = {
notification: {
backgroundColor: 'white',
"&:hover, &.Mui-focusVisible": { backgroundColor: "white" }
},
test: {
color: 'green'
}
}
Then import navBarStyles
//navbar.tsx
import { navBarStyles } from '../styles/mui/navbar';
Apply Styles
//navbar.tsx
const Navbar = () => {
return (
<IconButton sx={navBarStyles.notification}>
<KeyboardArrowDownRoundedIcon htmlColor='#ffffff' />
</IconButton>
)
}