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

如果您想将道具与Styled组件绑定在一起，而在渲染组件时不担心它们，可以使用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 />

实质性用户界面和样式化组件覆盖问题

1 个答案: