reactjs - 如何在 Material UI 的 React 中使用 Typography 作为样式组件

Question

我是 Material UI 的新手。在这里，我试图创建一个样式化的组件，它将是一个 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'
  }
}))

Answer 1

我不确定您是否在那里使用了正确的语法，但这是我通常将组件传递给样式化组件的方式(注意我没有使用点表示法)。此外，您可以使用常用的 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
   }
`;

如果您希望将其他 Prop 传递给 StyledTypography，例如，将 variant 设置为 caption，

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