React styled components樣式組件化使用流程
將style樣式寫在同一個(gè)文件中并且組件化使用.
安裝
npm i styled-components
基本使用
const 樣式組件名=引入的styled-components.替代的標(biāo)簽(支持sass寫法)
再使用樣式組件名將標(biāo)簽包裹起來(lái)即可
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>首頁(yè)</li> <li>列表</li> <li>我的</li> </ul> </footer> </StyleFooter> ); } } export default App001;
這樣就能成功實(shí)現(xiàn)對(duì)該包裹標(biāo)簽的樣式實(shí)現(xiàn)
props傳值修改樣式
通過(guò)給標(biāo)簽綁定屬性值進(jìn)行傳值
通過(guò)${props=>props.屬性名}獲取標(biāo)簽上傳來(lái)的屬性
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;
樣式化組件
通過(guò)父類修改子組件的樣式
首先創(chuàng)建樣式,然后Child
子組件能接收到一個(gè)props
,再將props.className
綁定到自己className
上,這樣就實(shí)現(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由父類傳來(lái) return <div className={props.className}>孩子</div> } export default App003;
樣式擴(kuò)展
可以當(dāng)作樣式繼承,通過(guò)繼承上一個(gè)樣式從而獲取和它一樣的樣式
下方結(jié)果能得到一個(gè)按鈕是黃色,一個(gè)是紅色–寬高一樣,通過(guò)styled(自定義的樣式名)從而繼承這個(gè)自定義的樣式…
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;
動(dòng)畫
動(dòng)畫需要引入styled-components中的keyframes
import styled,{keyframes} from 'styled-components';
然后進(jìn)行定義動(dòng)畫,再通過(guò)在單引號(hào)中使用${使用該動(dòng)畫}
import React, { Component } from 'react'; import styled,{keyframes} from 'styled-components'; class App005 extends Component { render() { //1.定義動(dòng)畫 const myaniamtion=keyframes` from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } ` //2.進(jìn)行使用 const StyledDiv=styled.div` width:100px; height:100px; background:yellow; animation: ${myaniamtion} 1s infinite ` return ( <div> <StyledDiv></StyledDiv> </div> ); } } export default App005;
這樣就學(xué)會(huì)了Styled-Components
到此這篇關(guān)于React styled components樣式組件化使用流程的文章就介紹到這了,更多相關(guān)React styled components 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react在安卓中輸入框被手機(jī)鍵盤遮擋問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機(jī)鍵盤遮擋問(wèn)題的解決方法,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧2018-09-09React Ref Callback使用場(chǎng)景最佳實(shí)踐詳解
這篇文章主要為大家介紹了React Ref Callback使用場(chǎng)景最佳實(shí)踐詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React Hooks 實(shí)現(xiàn)和由來(lái)以及解決的問(wèn)題詳解
這篇文章主要介紹了React Hooks 實(shí)現(xiàn)和由來(lái)以及解決的問(wèn)題詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01淺談react.js中實(shí)現(xiàn)tab吸頂效果的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談react.js中實(shí)現(xiàn)tab吸頂效果的問(wèn)題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09React?Native系列之Recyclerlistview使用詳解
這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10