custom style issue when migrating material ui v4 to v5 - material-ui

Question

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

Answer 1

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