javascript - 将 Material UI Typography 更改为样式组件

Question

是否可以转换 Material UI 元素

<Container component="main" maxWidth="XS">

<Typography component="h1" variant="h5">
          Sign in
        </Typography>

进入样式组件？

我尝试使用此方法进行排版，但文本似乎小得多。

export const Typo = styled.h5`

export const Typo = styled(Typography)`
component: h1; 
variant: h5;
`

另一个例子:我尝试使用这个，但 mt: 8 也不起作用。我也无法从 Material ui 系统导入 Box，所以在看到示例后尝试了此方法。

import Box from '@material-ui/core/Box';

export const StyledBox = styled(Box)`
mt: 8;

Answer 1

使用@material-ui/system

@material-ui/system provides low-level utility functions called "style functions" for building powerful design systems.

将其与样式组件一起使用

import styled from 'styled-components';
import { palette, spacing, typography } from '@material-ui/system';

const Box = styled.div`${palette}${spacing}${typography}`;

对于排版

请参阅此处的演示:https://material-ui.com/system/typography/#typography

<小时/>

更新

如果我们只想使用styled-components来设置material-ui组件的样式

从正常的@material-ui/core导入就可以了

import { Typography } from '@material-ui/core';

const StyledTyppgraphy = styled(Typography)`
  ...
`;

引用:styled-components文档Extending Styles