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) =>
  createStyles({
    dob: {
      color: theme.palette.grey[300],
    },
    location: {
      color: theme.palette.grey[300],
    },
  })
)

And in our component, we have

<Box>
...
<Typography className={classes.dob} variant="caption">
                      {formatDateTime(
                        person.dateOfBirth,
                        "M/D/YYYY HH:mm:ss A"
                      )}
</Typography>
<Typography className={classes.location} variant="caption">
                    {props.person.location}
</Typography>
...
</Box>

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">
                        {props.person.location}
</Typography>

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">
  {props.person.location}
</Typography>

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

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

Codesandbox Demo

References

The sx prop

Style library interoperability