将资料ui v4迁移到v5时出现自定义样式问题

Question

在我们当前的react应用程序中，我们使用的是material v4，我们有以下定制风格：

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

在我们的组成部分中，我们

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

现在我们正在升级到v5。在迁移指南中，它建议使用sx，但是我在主题上出现了一个错误。

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

有谁知道我该怎么解决这个问题吗？此外，我想知道是否可以使用styled()来在诸如Box、Appbar等重要ui组件上创建自定义样式。指南中提供的示例仅用于泛型html元素，例如div、span。例如：

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

Answer 1

sx可以充当内联style，因此必须提供数据类型，如果要使用theme，则必须将主题作为函数传递为第一个参数。

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

是的，您可以基于现有的MUI组件创建自定义组件。

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

码箱演示

​

​

参考文献

道具

风格库互操作