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

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?

Erikerika

The way you're using the style.js file makes me think you should look into Theming (i.e. applying a global style to your entire app). If you want to re-use the styled Grid component then you should look into styled components. The sx prop should generally only be used for minor tweaks. – Noninterference

Answer 1

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>
  )
}

Dunstable

I'm using this strategy as well. But is there a standard way to also reference your local theme properties with this strategy? So that we can reuse the theme values? – Climactic

Answer 2

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.

Weinreb