材质UI和样式组件覆盖问题

Question

我使用Material UI的排版，它工作得很好：

 <Typography component="h1" variant="h5">
          Sign in
        </Typography>

但是，我想转移到样式化组件，所以我尝试使用以下代码：

export const Typo = styled(Typography)`
    component: h1;
    variant: h5;
`;

尽管属性是完全相同的，但这种排版不同，而且更小。我怎么才能修复它？我做错了什么？除了component和variant之外，我还需要使用其他工具吗

我也试过了，但没有什么不同。

export const Typo = styled(Typography)`
  && {
    component: h1;
    variant: h5;
  }
`;

Answer 1

您只需在样式化的正文中编写CSS：

styled(Typography)`
  /* Only CSS here */
`

你所做的就是在这里写道具，这是行不通的。你可以将这些道具传递给你的样式化组件，它将会工作得很好。

export const Typo = styled(Typography)`
    /* Write your CSS here */
`;

// Pass your props to Typo
<Typo component="h1" variant="h5" />

如果您希望将道具绑定到样式化组件，并且在呈现组件时不需要担心它们，您可以使用attrs()方法来实现：

export const Typo = styled(Typography).attrs({
  component: 'h5',
  variant: 'h1'
})`
    /* Write your CSS here */
`;

// No need to pass props anymore, they are bind to this component
<Typo />