一、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的路上。如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。