欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年02月06日 09:47:12   作者:碰磕  
styled-components 是react的一個第三方庫,一種css私有化的方式。用來實現(xiàn)CSS in JS 的方式之一。在多人協(xié)作中,css必定會出現(xiàn)命名沖突,與vue的scoped解決方案不同,react用styled-components的給類名加了隨機字符的方式實現(xiàn)了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;

這樣就能成功實現(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?保留和重置State

    React?保留和重置State

    這篇文章主要為大家介紹了React?保留和重置State實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • React如何避免重渲染

    React如何避免重渲染

    這篇文章主要介紹了React如何避免重渲染,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • react在安卓中輸入框被手機鍵盤遮擋問題的解決方法

    react在安卓中輸入框被手機鍵盤遮擋問題的解決方法

    這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機鍵盤遮擋問題的解決方法,文中通過圖文以及示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧
    2018-09-09
  • React Ref Callback使用場景最佳實踐詳解

    React Ref Callback使用場景最佳實踐詳解

    這篇文章主要為大家介紹了React Ref Callback使用場景最佳實踐詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • React組件refs的使用詳解

    React組件refs的使用詳解

    這篇文章主要介紹了React組件refs的使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • react  Suspense工作原理解析

    react  Suspense工作原理解析

    這篇文章主要為大家介紹了react  Suspense工作原理解析以及基本應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • React Hooks 實現(xiàn)和由來以及解決的問題詳解

    React Hooks 實現(xiàn)和由來以及解決的問題詳解

    這篇文章主要介紹了React Hooks 實現(xiàn)和由來以及解決的問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • 淺談react.js中實現(xiàn)tab吸頂效果的問題

    淺談react.js中實現(xiàn)tab吸頂效果的問題

    下面小編就為大家?guī)硪黄獪\談react.js中實現(xiàn)tab吸頂效果的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React配置代理方式(proxy)

    React配置代理方式(proxy)

    這篇文章主要介紹了React配置代理方式(proxy),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • React?Native系列之Recyclerlistview使用詳解

    React?Native系列之Recyclerlistview使用詳解

    這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10

最新評論