iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 16

DAY16-Style Components

sc.jpg

前言:

今天我們要來介紹React裡很強大的一個工具!沒錯就是Style Components!廢話不多說,我們直接開始吧!

這是什麼鬼東東:

Style Components其實是一個滿新的東西,主要功能是結合的JS和CSS,也就是所謂的CSS in JS,而當這個功能和React中的自定義組件一起使用時,效率就快很多了。

今天阿森會先介紹怎麼安裝這個插件,而介紹一個就相當於介紹完React中新增插件的方法了,因為大多都大同小異。

再來我會舉昨天HeroSection的內容作為例子,介紹自定義組件如何和Style Components一起合作。

安裝插件:

當你今天要安裝任何一個插件時,所需要的步驟都一樣,就是→google他→找到npm doc→找到npm install或yarn add的code→到你的terminal貼上。

就是這麼簡單!

所以我們先搜尋Style Components npm:

截圖 2021-09-05 下午10.33.29.png

會找到這個網站,這時候右邊install的指令就是我們的目標的,把他複製起來貼在你react workspace資料夾的terminal:

截圖 2021-09-05 下午10.35.14.png

按下enter後就會自動安裝了,要確定是否安裝或是版本可以打開前面提到的package.json做確認。

截圖 2021-09-05 下午10.36.08.png

這樣你就完成插件的安裝了!

怎麼用出你的Style:

接下來我舉昨天提到過的例子,我們再打開一次HeroSection資料夾中的index.js:

import React, { useState } from 'react'
	import {HeroContainer, 
					HeroBg, 
				  HeroContent, 
					HeroH2, 
					HeroH2Wrapper
} from './HeroElements'

const HeroSection = () => {
const [hover, setHover] = useState(false)
const onHover = () => {
    setHover(!hover)
}

    return (
        <HeroContainer >
            <HeroBg />
            <HeroContent>
                <HeroH2Wrapper>
                <HeroH2>Hi</HeroH2>
                <HeroH2>I'm Sen Chao!</HeroH2>
                <HeroH2>Nice to meet</HeroH2>
                <HeroH2>you!</HeroH2>
                </HeroH2Wrapper>
            </HeroContent>
        </HeroContainer>
    )
}

export default HeroSection

在React中,大寫開頭的tag就是你自定義的tag,所以我們這裡有:

HeroContent, HeroH2, HeroH2Wrapper, HeroContainer, HeroBg這幾個Tag。

但這時候React其實是讀不懂的,他預設的Tag只有像是div, img, ul等,所以我們可以用Style Components來做設定,而通常我們會再創一個叫做Elements的js檔,這裡就是HeroElements.js。

import styled from "styled-components";
import meblur from '../../images/bandblur.jpg'

export const HeroContainer = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    height: 950px;
    position: relative;
    z-index: 1;
    background-size: cover;
    width: 100%;
    background-image: url(${meblur});
    background-size: cover;
    background-position: center;

    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(120deg, #ee7752, #23d5ab);
        background-size: 400% 400%;
        animation: change 10s ease-in-out infinite;
        opacity: 0.4;
        z-index: 2;
    }

    @keyframes change{
        0%{

    background-position: 0 50%;

    }

    50%{

    background-position: 100% 50%;
    }

    100%{

    background-position: 0 50%;

    }
    }
`

export const HeroBg = styled.div`
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

`

export const HeroContent = styled.div`
    z-index: 3;
    max-width: 1200px;
    width: 100%;
    position: absolute;
    padding: 8px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;

`

export const HeroH1 = styled.h1`
    color: #fff;
    font-size: 48px;
    text-align: center;

    @media screen and (max-width: 768px) {
        font-size: 40px;
    }

    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
`

export const HeroP = styled.p`
    margin-top: 24px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    max-width: 600px;

    @media screen and (max-width: 768px) {
        font-size: 24px;
    }

    @media screen and (max-width: 480px) {
        font-size: 18px;
    }
`

export const HeroH2 = styled.h2`
    position: relative;
    font-size: 7vh;
    letter-spacing: 15px;
    color: lightcyan;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    justify-content: center;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
    line-height: 0em;
    outline: none;
    text-shadow: none;
    z-index: -10;
    margin-bottom: 10%;
    border: none;
    

    &:hover{
        
        animation: animate 6s linear infinite ;
    
    }

    @media screen and (max-width: 768px){
        font-size: 2vh;
        margin-bottom: 10%;
    }

    @keyframes animate
    {
        0%, 20%, 26%, 35%{
            color: #0e3742;
            text-shadow: none;
        }
        10%, 22%, 30%, 50%, 100%
        {
            color: #fff;
            text-shadow: 0 0 10px #03bcf4,
            0 0 20px #03bcf4,
            0 0 40px #03bcf4,
            0 0 80px #03bcf4,
            0 0 160px #03bcf4;
        }
    }
`

export const HeroH2Wrapper = styled.div`
    position: relative;
    justify-content: center;
    display: block;
    left: 0;
    align-items: center;
    min-height: 100vh;
    background: transparent;
    top: 25vh;
    z-index: -10;
    width: 100%;
    
`

在這裡可以看到一開始一定會先使用這句:

import styled from "styled-components";

之後對他做操作,像是這樣:

export const HeroH2Wrapper = styled.div

這裡就指派了Wrapper會以div的形式export到網頁中,最後會用``把css特性包裹起來。

在Style Components裡如果要設定media等效果,只要在每一個元件中直接寫就好,跟一般css要統一設定不太一樣,我個人是覺得更方便了一些,像是這些部分:

export const HeroH2 = styled.h2`

    ...
    

    &:hover{
        
        animation: animate 6s linear infinite ;
    
    }

    @media screen and (max-width: 768px){
        font-size: 2vh;
        margin-bottom: 10%;
    }
`

他其實就是把css元件化,所以在定義和使用上都更加方便,實際編寫的時候也不會太困難,真的是很好用的一個library。

小結:

今天大概講了Style Components的使用方法,之後的NFT網站我也會用css和Style Components做混搭,那今天就先這樣,希望大家都學會使用這樣一個厲害的工具了!那我們明天再見吧!


上一篇
DAY15-React to React
下一篇
DAY17-MERN
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言