CSS in JS 之 Styled-components 用法

npm i styled-components

基本用法

import React, { Component } from 'react'
import styled from 'styled-components'
export default class App extends Component {
    render() {
        const StyledFooter = styled.footer`
            background:yellow
        `
        return (
            <StyledFooter>
                <footer>
                    <ul>
                        <li>首頁</li>
                        <li>列表</li>
                        <li>我的</li>
                    </ul>
                </footer>
            </StyledFooter>
        )
    }
}

支援sass/less語法

import React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {


    render() {
        const StyledFooter = styled.footer`
        background:yellow;
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:50px;
        line-height:50px;
        text-align:center;
        ul{
            display:flex;
            list-style:none;
            li{
                flex:1;


                &:hover{
                    background:red;
                }
            }
        }
        `
        return (
            <StyledFooter>
                <footer>
                    <ul>
                        <li>首頁</li>
                        <li>列表</li>
                        <li>我的</li>
                    </ul>
                </footer>
            </StyledFooter>
        )
    }
}

可透傳props 以及 基於props做樣式判斷

import React, { Component } from 'react'
import styled from 'styled-components'
export default class App 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 || 'yellow'};
        `
        return (
            <StyledDiv bg={"lightblue"}>
                Apppppp
                <StyledInput type="password" ></StyledInput>
            </StyledDiv>
        )
    }
}

樣式化任意元件

import React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {
    render() {
        const StyledChild = styled(Child)`
         background: yellow
        `
        return (
            <div>
                <StyledChild></StyledChild>
            </div>
        )
    }
}


function Child(props) {//子元件記得接收
    return (
        <div className={props.className}>//子元件記得接收
            Child
        </div>
    )
}

css的複用、擴充套件、增強

mport React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {
    render() {
        const StyledButton = styled.button`
         width:100px;
         height:100px;
         background:yellow;
        `
        const StyledButton2 = styled(StyledButton)`
        background:red;
       `
        return (
            <div>
                App
                <StyledButton></StyledButton>
                <StyledButton2></StyledButton2>
            </div>
        )
    }
}

新增動畫 定義keyframes

import React, { Component } from 'react'
import styled, { keyframes } from 'styled-components'

export default class App extends Component {
    render() {
        const myanimation = keyframes`
         from{
             transform:rotate(0deg)
         }
         to{
            transform:rotate(360deg)
         }
        `
        const StyledDiv = styled.div`
         width: 100px;
         height: 100px;
         background: yellow;
         animation: ${myanimation} 1s infinite;
        `
        return (
            <div>
                <StyledDiv>
                </StyledDiv>
            </div>
        )
    }
}