快捷導(dǎo)航

React styled components樣式組件化使用流程

更新時(shí)間：2023年02月06日 09:47:12 作者：碰磕

styled-components 是react的一個(gè)第三方庫(kù)，一種css私有化的方式。用來(lái)實(shí)現(xiàn)CSS in JS 的方式之一。在多人協(xié)作中，css必定會(huì)出現(xiàn)命名沖突，與vue的scoped解決方案不同，react用styled-components的給類名加了隨機(jī)字符的方式實(shí)現(xiàn)了css的私有化

安裝

npm i styled-components

基本使用

const 樣式組件名=引入的styled-components.替代的標(biāo)簽(支持sass寫(xiě)法)

再使用樣式組件名將標(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)畫(huà)

動(dòng)畫(huà)需要引入styled-components中的keyframes

import styled,{keyframes} from 'styled-components';

然后進(jìn)行定義動(dòng)畫(huà)，再通過(guò)在單引號(hào)中使用${使用該動(dòng)畫(huà)}

import React, { Component } from 'react';
import styled,{keyframes} from 'styled-components';
class App005 extends Component {
    render() {
        //1.定義動(dòng)畫(huà)
        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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: