Пользовательский интерфейс материала и проблема переопределения стилизованных компонентов - PullRequest
Новая
       33

Пользовательский интерфейс материала и проблема переопределения стилизованных компонентов

0 голосов
/ 12 апреля 2020

Я использовал типографику 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;
  }
`;

1 Ответ

2 голосов
/ 12 апреля 2020

Вы пишете только 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 />
...