排版组件
我们拓展了基础组件的概念创造了排版组件. 这个模式能保证一致性以及你的样式足够的纯净.
例子
import React from 'react';
import { alternateFont, typeScale, boldFontWeight } from './styles';
const Text = ({
tag = 'span',
size = 4,
alt,
center,
bold,
caps,
...props
}) => {
const Tag = tag;
const sx = {
fontFamily: alt ? alternateFont : null,
fontSize: typeScale[size],
fontWeight: bold ? boldFontWeight : null,
textAlign: center ? 'center' : null,
textTransform: caps ? 'uppercase' : null
};
return <Tag {...props} style={sx}/>
};
const LeadText = (props) => <Text {...props} tag='p' size={3}/>;
const Caps = (props) => <Text {...props} caps/>;
const MetaText = (props) => <Text {...props} size={5} caps/>;
const AltParagraph = (props) => <Text {...props} tag='p' alt/>;
const CapsButton = ({ children, ...props }) => (
<Button {...props}>
<Caps>
{children}
</Caps>
</Button>
);
用法
const TypographyComponent = () => (
<div>
<LeadText>
This is a lead with some<Caps>all caps</Caps>.
It has a larger font size than the default paragraph.
</LeadText>
<MetaText>
This is smaller text, like form helper copy.
</MetaText>
</div>
);
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程