React styled components样式组件化使用流程
作者：碰磕
styled-components 是react的一个第三方库，一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化
将style样式写在同一个文件中并且组件化使用.
安装
npm i styled-components
基本使用
const 样式组件名=引入的styled-components.替代的标签(支持sass写法)
再使用样式组件名将标签包裹起来即可
import React, { Component } from 'react';
import styled from 'styled-components';
class App001 extends Component {
render() {
const StyleFooter=styled.footer`
background:yellow;
position:fixed;
left:0;
bottom:0;
width:100%;
height:50px;
line-height:50px;
text-align:center;
ul{
display:flex;
li{
flex:1;
&:hover{
background:red;
}
}
}
`
return (
<StyleFooter>
<footer>
<ul>
<li>首页</li>
<li>列表</li>
<li>我的</li>
</ul>
</footer>
</StyleFooter>
);
}
}
export default App001;
这样就能成功实现对该包裹标签的样式实现
props传值修改样式
通过给标签绑定属性值进行传值
通过${props=>props.属性名}获取标签上传来的属性
import React, { Component } from 'react';
import styled from 'styled-components';
class App002 extends Component {
render() {
const StyledInput=styled.input`
outline:none;
border-radius:10px;
border-bottom:1px solid red;
`
const StyledDiv=styled.div`
background:${props=>props.bg||'red'};
width:100px;
height:100px;
`
return (
<div>
<StyledInput type="text"></StyledInput>
<StyledDiv bg="green"></StyledDiv>
</div>
);
}
}
export default App002;
样式化组件
通过父类修改子组件的样式
首先创建样式，然后Child子组件能接收到一个props,再将props.className绑定到自己className上,这样就实现了样式化组件
import React, { Component } from 'react';
import styled from 'styled-components';
class App003 extends Component {
render() {
//1.创建样式
const StyleChild=styled(Child)`
background:red;
`
return (
<div>
<StyleChild>
<Child />
</StyleChild>
</div>
);
}
}
function Child(props){
//2.绑定classname,props由父类传来
return <div className={props.className}>孩子</div>
}
export default App003;
样式扩展
可以当作样式继承，通过继承上一个样式从而获取和它一样的样式
下方结果能得到一个按钮是黄色，一个是红色–宽高一样,通过styled(自定义的样式名)从而继承这个自定义的样式…
import React, { Component } from 'react';
import styled from 'styled-components';
class App004 extends Component {
render() {
const StyledButton=styled.button`
width:100px;
height:100px;
background:yellow;
`
const MyButton=styled(StyledButton)`
background:red;
`
return (
<div>
<MyButton></MyButton>
<StyledButton>1231</StyledButton>
</div>
);
}
}
export default App004;
动画
动画需要引入styled-components中的keyframes
import styled,{keyframes} from 'styled-components';
然后进行定义动画，再通过在单引号中使用${使用该动画}
import React, { Component } from 'react';
import styled,{keyframes} from 'styled-components';
class App005 extends Component {
render() {
//1.定义动画
const myaniamtion=keyframes`
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
`
//2.进行使用
const StyledDiv=styled.div`
width:100px;
height:100px;
background:yellow;
animation: ${myaniamtion} 1s infinite
`
return (
<div>
<StyledDiv></StyledDiv>
</div>
);
}
}
export default App005;
这样就学会了Styled-Components
到此这篇关于React styled components样式组件化使用流程的文章就介绍到这了,更多相关React styled components 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！