React styled components样式组件化使用流程
碰磕 人气:0将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
加载全部内容