react使用styled-components

一、styled-components

1.1 安装使用

styled-components它是通过javascript改变css编写方式的解决方案之一，从根本上解决常规css编写的一些弊端。
通过javascript来为css赋能，能达到常规css所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在jsx上面，html、css、js三者再次内聚。all is js思想。

运行安装命令npm i styled-components

在项目中创建文件夹styled-components及其子文件StyleComponent.js，并在index.js引入：

在StyleComponent.js写入代码：

import React, { Component } from 'react'
import styled from 'styled-components'export default class StyleComponent extends Component {render() {const StyledFooter = styled.footer`background:yellow;position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;ul {display: flex;list-style-type: none;li {flex: 1;}}`return (<StyledFooter><ul><li>首页</li><li>列表</li><li>我的</li></ul></StyledFooter>)}
}

效果：

可以看到我们引入的styled就是一个组件.footer将会生成footer标签并用模版字符串进行样式写法，支持像sass的嵌套写法

1.2 基于props做样式判断

import React, { Component } from 'react'
import styled from 'styled-components'export default class StyleComponent extends Component {render() {const StyledButton = styled.button`background: ${props=>props.bg || 'blue'}`return (<div><StyledButton>btn</StyledButton><StyledButton bg="yellow">btn</StyledButton></div>)}
}

效果：

1.3 样式化任意组件

import React, { Component } from 'react'
import styled from 'styled-components'export default class StyleComponent extends Component {render() {const Child = (props) => <div className={props.className}>child</div>const StyledChild = styled(Child)`background: ${props=>props.bg || 'blue'};color: #fff;`return (<div><StyledChild>btn</StyledChild></div>)}
}

1.4 动画

import React, { Component } from 'react'
import styled, {keyframes} from 'styled-components'export default class StyleComponent extends Component {render() {const rotate360 = keyframes`from {transform: rotate(0deg);}to {transform: rotate(360deg);}`const Rotate = styled.div`position: absolute;left: 50px;top: 100px;background: blue;width: 100px;height: 100px;animation: ${rotate360} 1s linear infinite;`return (<div><Rotate></Rotate></div>)}
}

效果：

可以看到我们引入了keyframes，进行了动画编写。

在学习React的路上。如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。