react----style-components

用jsx的方式實現css
官方文檔：https://www.styled-components.com/docs
1.安裝：npm install --save style-components
2.基本用法
在項目裏面的用法，用的是最基礎的方式：用組件的形式編寫樣式

	import React,{useState,useImperativeHandle,forwardRef} from 'react'
    import styled from 'styled-components'  
    import style from '../../assets/global-style'   //將全局的主要用色等css樣式，用js文件進行保存
      
 	 const Wrapper = styled.div`
	      position: fixed;
	      bottom: 0;
	      z-index: 1000;
	      width: 100%;
	      height: 50px;
	      .text{
	        line-height: 50px;
	        text-align: center;
	        color: red;
	        font-size: ${style["font-size-l"]};
	      } `
      
    const Toast = forwardRef((props,ref)=>{
        return (
                <div>
                    <Wrapper>
                        <div className="text">5555</div>
                    <Wrapper>
                </div>
        )
    })
    
    export default React.memo(Toast);

3.常見用法的基本總結
（1）.通過props接受傳遞的屬性(因爲磁軛是的方式是將css用組件的方式進行書寫，所以可以有props)

import React,{useState,useImperativeHandle,forwardRef} from 'react'
import styled from 'styled-components'  
import style from '../../assets/global-style'   //將全局的主要用色等css樣式，用js文件進行保存
  
const Button = styled.button`
  color: ${props => props.cancel? style["theme-color"]: "white"};
  background:${props=>props.cancel?"#fff":"#d44439"}
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border:${props=>props.cancel? "2px solid #d44439":"none"} ;
  border-radius: 3px;
`
      
const Toast = forwardRef((props,ref)=>{
    return (
            <div>
                <Button cancel>返回</Button>
            	<Button>確定</Button>
            </div>
    )
})

export default React.memo(Toast);

（2）樣式化其他組件

import React,{useState,useImperativeHandle,forwardRef} from 'react'
import styled from 'styled-components'  
import style from '../../assets/global-style'   //將全局的主要用色等css樣式，用js文件進行保存
  
const Button = styled.button`
  color: ${props => props.cancel? style["theme-color"]: "white"};
  background:${props=>props.cancel?"#fff":"#d44439"}
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border:${props=>props.cancel? "2px solid #d44439":"none"} ;
  border-radius: 3px;
`
// 可以直接傳入一個另外的定義的樣式，作爲基礎的公用樣式
const MoreButton = styled(Button)` 
   color: #9966CC;
   background:#fff;
   border:1px solid #9966CC;
 `


const Toast = forwardRef((props,ref)=>{
    return (
            <div>
                <MoreButton>我是button的更多樣式</MoreButton>
            </div>
    )
})

export default React.memo(Toast);

(3)動畫
a.loading展示1（是收集的參考別人的開源項目）

import React from 'react';
import styled, { keyframes } from 'styled-components';
import style from '../../assets/global-style';

const loading = keyframes`
  0%, 100% {
    transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
  }
`
const WrapperL = styled.div`
    >div {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      margin: auto;
      width: 60px;
      height: 60px;
      opacity: 0.6;
      border-radius: 50%;
      background-color: ${style["theme-color"]};
      animation: ${loading} 1.4s infinite ease-in;
    }
    >div:nth-child(2) {
      animation-delay: -0.7s;
    }
`

function Loading()  {
  return (
    <WrapperL>
      <div></div>
      <div></div>
    </WrapperL>
  );
}
 
export default React.memo(Loading);

eg:一個展示loading

loading2（是收集的參考別人的開源項目）

import React from 'react';
import styled, {keyframes} from 'styled-components';
import style from '../../assets/global-style'

const dance = keyframes`
    0%, 40%, 100%{
      transform: scaleY(0.4);
      transform-origin: center 100%;
    }
    20%{
      transform: scaleY(1);
    }
`
const Loading = styled.div`
    height: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 10px;
    >div{
      display: inline-block;
      background-color: ${style["theme-color"]};
      height: 100%;
      width: 1px;
      margin-right:2px;
      animation: ${dance} 1s infinite;
    }
    >div:nth-child(2) {
      animation-delay: -0.4s;
    }
    >div:nth-child(3) {
      animation-delay: -0.6s;
    }
    >div:nth-child(4) {
      animation-delay: -0.5s;
    }
    >div:nth-child(5) {
      animation-delay: -0.2s;
    } 

`

function LoadingV2() {
  return (
    <Loading>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </Loading>
  );
}
 
export default React.memo(LoadingV2);