styled-components（笔记）

• 再react中使用，创建一个react组件，并且编写样式，支持传入props，编程式控制CSS，好处不会收到样式污染。webpack编译后会将class类名编译为sc-随机英文字母并且大小写都有。

• 使用方法

  1. 基于HTML标签编写styled组件

     ---

     import styled from 'styled-components'
     	const DivBox = styled.div`
     		color:${(props)=>(props.color)}
     	`
         <DivBox color={'red'}>基于HTML标签编写styled组件</DivBox>
     

  2. 基于自定义React组件编写styled组件

     注：自定义React组件的props需要定义className才可以接收styled传过来的样式

     const Link = ({ className, children }) => (
       <a className={className}>
         {children}
       </a>
     );
     
     const StyledLink = styled(Link)`
       color: palevioletred;
       font-weight: bold;
     `;
     render( <StyledLink>Styled, exciting Link</StyledLink>)
     

  3. props使用方法

     1. 定义props的类型

     2. 使用时通过回调函数接收props,将需要的props属性返回即可

     3. 支持定义默认props属性值

        cosnt propsStyled = styled.div<{opacity:number,divdier:number}>`
        opacity:${props=>props.opacity};
        `
        
        const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
           输入css样式
        `