Styled Conponents使用总结

用法

两种基础写法

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状态。。