是否可以转换 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;
最佳答案
使用@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
关于javascript - 将 Material UI Typography 更改为样式组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61059715/