styled-components 基本用法

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，旨在记录和分享过程