日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：碰磕 ? 更新時間： 2023-04-07 編程語言

將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

原文鏈接：https://blog.csdn.net/m_xiaozhilei/article/details/125545804

欄目分類
最近更新