@ozo/react-rock
Version:
React 移动端开发脚手架，基于CRA3，通用、开箱即用。
53 lines (51 loc) • 2.33 kB
JavaScript
import React from 'react';
import Typography from '@material-ui/core/Typography';
export default function Types() {
return (
<div>
<Typography variant="h1" component="h2" gutterBottom>
h1. Heading 20px
</Typography>
<Typography variant="h2" gutterBottom>
h2. Heading 18px
</Typography>
<Typography variant="h3" gutterBottom>
h3. Heading 16px
</Typography>
<Typography variant="h4" gutterBottom>
h4. Heading 14px
</Typography>
<Typography variant="h5" gutterBottom>
h5. Heading 13px
</Typography>
<Typography variant="h6" gutterBottom>
h6. Heading 12px
</Typography>
<Typography variant="subtitle1" gutterBottom>
subtitle1. 副标题 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</Typography>
<Typography variant="subtitle2" gutterBottom>
subtitle2. 副标题 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</Typography>
<Typography variant="body1" gutterBottom>
body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit,
quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat
deleniti? Eum quasi quidem quibusdam.
</Typography>
<Typography variant="body2" gutterBottom>
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit,
quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat
deleniti? Eum quasi quidem quibusdam.
</Typography>
<Typography variant="button" display="block" gutterBottom>
button text
</Typography>
<Typography variant="caption" display="block" gutterBottom>
caption text
</Typography>
<Typography variant="overline" display="block" gutterBottom>
overline text
</Typography>
</div>
);
}