custom style issue when migrating material ui v4 to v5

In our current react app, we are using material ui v4, we have following customized style:

const useStyles = makeStyles((theme) =>
    dob: {
      color: theme.palette.grey[300],
    location: {
      color: theme.palette.grey[300],

And in our component, we have

<Typography className={classes.dob} variant="caption">
                        "M/D/YYYY HH:mm:ss A"
<Typography className={classes.location} variant="caption">

Now we are upgrading to v5. In the migration guide, it recommended to use sx, but I got an error with theme

<Typography sx={{theme.palette.grey[300]}} variant="caption">

Does any know how do I fix this? In addition, I wonder if I could use styled() to create a custom style on a material ui components, such as Box, Appbar, etc. The examples provided in the guide only for generic html elements, such as div, span. For example:

const MyTypograhy = styled('Typography')(({ theme }) => ({
  color: theme.palette.primary.main,

>Solution :

sx could act like inline style, so you must provide the data type, and if you want to use theme, you must pass as a function with theme is the first parameter

<Typography sx={{ color: theme => theme.palette.grey[300] }} variant="caption">

And yes you could create custom component based on existing MUI component

const CustomBox = styled(Box)((theme) => ({
  padding: "2rem",
  background: "black"

Codesandbox Demo

Edit cool-snow-fhzpsi


The sx prop

Style library interoperability

Leave a Reply