Question

我是材料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
   }
`;

例如，如果您希望将其他道具传递到StyledTypography，请将variant设置为caption，

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

如何在材质UI的反应中使用版式作为样式化组件

1 个答案: