用法
两种基础写法
import styled from 'styled-components';
// 第一种
const Button = styled.button`
background: blue;
`;
// 第二种
const TomatoButton = styled(Button)`
background: red;
`;
进阶
attrs
const Input = styled.input.attrs({
type: 'text',
size: props => props.small ? 3 : 8
})`
color: blue;
padding: ${props => props.padding}
`;
css定义样式
import styled, { css } from 'styled-components';
const padding = '3em';
const background = css`background: ${props.background};`;
const Section = styled.section`
color: white;
padding: ${padding};
background: ${background};
`;
extend
const Button = styled.div`background: blue;`;
const specialButton = styled.div`background: red;`;
withComponent
const Button = styled.div`background: blue;`;
const aButton = Button.withComponent('a');
keyframes定义动画的初始值和结尾值
const rotate360 = keyframes`
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
`;
const Rotate = styled.div`
display: inline-block;
animation: ${rotate360} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;
** injectGlobal 定义全局样式**
import { injectGlobal } from 'styled-components';
injectGlobal`
@font-face {
font-family: 'Operator Mono';
src: url('../fonts/Operator-Mono.ttf');
}
body {
margin: 0;
}
`;
使用经验
- 组件容易刷新，state改变会导致所有组件刷新。主要是render内const定义造成的，解决办法就是const在render函数外定义甚至类外定义。。如果需要传参数，可以考虑在类外定义带参函数解决。
- 尽可能用html自带状态，比如Radio和checkbox的checked状态和disabled状态。。
