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

u1ehiz5o 于 2023-06-05 发布在 React

关注(0)|答案(2)|浏览(217)

我是材料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'
  }
}))

reactjs

来源：https://stackoverflow.com/questions/61113288/how-to-use-typography-as-a-styled-component-in-react-of-material-ui

2条答案

按热度按时间

kfgdxczn1#

我不确定你是否使用了正确的语法，但这是我通常将组件传递到样式化组件的方式（注意我没有使用点符号）。此外，您可以使用通常的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
   }
`;

如果您希望将其他props传入StyledTypography，例如将variant设置为caption，

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

赞(0）回复(0）举报 2023-06-05

6ie5vjzr2#

我不认为使用点号法是你的问题。我想这就是你想要达到的目标：

import { styled } from '@mui/material/styles'
import Typography from '@mui/material/Typography'

export const StyledTypography = styled(Typography)(({ theme }) => ({
  '&': {
    color: theme.palette.common.black,
    // ...and so on
  },
})) as typeof Typography

如果你不使用主题中的变量，另一个答案也是可以的。另外，请注意，当前特定组件上的component属性有一个bug，因此可能需要as typeof Typography。

赞(0）回复(0）举报 2023-06-05

我来回答

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

2条答案

相关问题

热门标签

最新问答