React styled components樣式組件化使用流程
將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;
這樣就能成功實現(xiàn)對該包裹標簽的樣式實現(xiàn)
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;
樣式化組件
通過父類修改子組件的樣式
首先創(chuàng)建樣式,然后Child
子組件能接收到一個props
,再將props.className
綁定到自己className
上,這樣就實現(xiàn)了樣式化組件
import React, { Component } from 'react'; import styled from 'styled-components'; class App003 extends Component { render() { //1.創(chuàng)建樣式 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;
樣式擴展
可以當(dāng)作樣式繼承,通過繼承上一個樣式從而獲取和它一樣的樣式
下方結(jié)果能得到一個按鈕是黃色,一個是紅色–寬高一樣,通過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;
這樣就學(xué)會了Styled-Components
到此這篇關(guān)于React styled components樣式組件化使用流程的文章就介紹到這了,更多相關(guān)React styled components 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React Hooks 實現(xiàn)和由來以及解決的問題詳解
這篇文章主要介紹了React Hooks 實現(xiàn)和由來以及解決的問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01React?Native系列之Recyclerlistview使用詳解
這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10