styled-components 基本用法

1. 安装

   npm install -save styled-components
   或
   yarn add styled-components
   
   注：如使用tsx语法请同时安装相应的@types声明文件
   npm install --save-dev @types/styled-components
   或在react-app-env.d.ts 添加 
   declare module 'styled-components'
   两种方法都可以解决报错，但建议使用第一种方法，
   会下载所有的声明文件，在vscode中就会有相应的代码提示

• 插件安装
  vscode 语法提示插件
  

2. 基础用法

   import React from 'react'
   import styled from 'styled-components'
   //styled.需要设置样式的DOM元素
   const Wrapper = styled.div`
       width : 400px;
       height : 300px;
       //支持样式嵌套
       .content{ 
       	background: skyblue;
       	color: #FFF;
   	}
   `
   //返回一个含有样式的对应DOM元素的组件
   export default ()=>{
       return <Wrapper>
       	<div className='content'></div>
   	</Wrapper>
   }

3. 传入变量

   import React from 'react'
   import styled from 'styled-components'
   //styled.需要设置样式的DOM元素
   const Wrapper = styled.div`
       width : ${props=>props.width};
       height : ${props=>props.height};
   `
   //返回一个含有样式的对应DOM元素的组件
   export default ({width,height})=>{
       return <Wrapper width={width} height={height}>
       	<div className='content'></div>
   	</Wrapper>
   }

4. 注意点

   1.样式组件的声明不要放在组件的内部 如下是错误的写法
   export default ()=>{
   	const Wrapper = styled``
   	return <Wrapper></Wrapper>
   }
   
   2.如果使用tsx时，向样式组件传递属性时，需要设定对应接口
   interface WrapperProps{
   	width : any;//这里写的是任意类型请参考实际情况书写正确类型
   }
   const Wrapper = styled.div<WrapperProps>{
   	width : ${props=>props.width}
   }
   export default ({width})=>{
   	return <Wrapper width={width}></Wrapper>
   }

更详细的用法请参考官方文档

个人感受

观点仅代表个人
这个组件更好的贴合了react all in js的一个设计理念，除开HTML，js以后，将css也纳入到js中
但是相对应的，在阅读HTML结构的时候需要可能翻阅上下文去了解正确的结构，牺牲了一部分的HTML可读性
如有不正确观点很欢迎指正，本人也在学习ing，旨在记录和分享过程