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);