Как использовать типографику как стилизованный компонент в реакции материала UI - PullRequest
Новая
       33

Как использовать типографику как стилизованный компонент в реакции материала UI

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

Я новичок в пользовательском интерфейсе материала. Здесь я пытаюсь создать стилизованный компонент, который будет Typography. Итак, я попробовал: 

import styled from 'styled-components';


 import {
  FormGroup,
  FormControlLabel,
  Tooltip,
  FormControl,
  Select,
  Radio,
  Typography,
  Button
} from '@material-ui/core'
const StyledTypography = styled.Typography<Itest>(({ marginLeft, marginRight }) => ({
}))

Но это дает мне ошибку во время компиляции. 

Property 'Typography' does not exist on type 'ThemedStyledInterface<ThemeInterface>'

Может ли кто-нибудь помочь мне с этим?

Я использовал следующий способ 

const StyledTypography = styled(Typography)<ISortBySelector>(({ fontSize }) => ({
  && {
  fontFamily: 'Roboto',
  fontSize: fontSize ? fontSize : '10px',
  fontWeight: 'normal',
  fontStretch: 'normal',
  fontStyle: 'normal',
  lineHeight: 'normal',
  letterSpacing: fontSize ? '0.14px' : '0.07px',
  width: fontSize ? '50px' : '35px',
  height: fontSize ? '19px' : '14px',
  color: '#000000',
  cursor: 'pointer'
  }
}))

1 Ответ

3 голосов
/ 09 апреля 2020

Я не уверен, что вы используете правильный синтаксис там, но именно так я обычно передаю компоненты в styleled-компоненты (обратите внимание, я не использую точечную запись). Кроме того, вы можете использовать обычный синтаксис CSS, а не нижний верблюжий формат. 

import Typography from '@material-ui/core/Typography';
import styled from 'styled-components';

const StyledTypography = styled(Typography)<Itest>`
   && {
     font-family: Roboto;
     // customise your styles here
   }
`;

И если вы хотите sh передать другие реквизиты в StyledTypography, например, установив variant как caption, 

<StyledTypography variant='caption'>
  Some text
</StyledTypography>
...