浅谈React中styled-components的简单实现

今天写到styled-components这个库了，发现这么强大的库真的是太牛了，然后脑抽的我花了半个小时思考这个库的一个简单实现，好像不是很难欸！怎么说，styled-components的基本使用 是贼个样子的：

import styled from 'styled-components'
const Stylefoot=styled.div`
        background:lightblue;
        position:fixed;
        bottom:5px;
        width:100%;
        height:30px;
        display:flex;
        justify-content:space-between;
        margin:0;
        flex-direction:low;
        li{
            width:30%;
            list-style:none;
            background:yellow;
            text-align:center;
            line-height:30px;
            &:hover{
                background:blue;
            }
        }
    `
    <Stylefoot>
                <li>111</li>
                <li>111</li>
                <li>111</li>
        </Stylefoot>

仔细一看呢，大概好像是一个类，叫做导入进来的styled，然后这个类有很多很多静态方法，简单来说，应该是有几个html标签就有几个方法，但是突然觉得好像也不是，毕竟没人这么傻吧写这么多函数，那就是复用了，使用interface声明接口来约束，但是肯定离不开input这种形式，那么我们可以写一个来简单模拟一下，搞个get接口，吸收``的参数，然后转化为css样式，创建对应的节点，正确来说应该判断用户传过来的节点是什么名字，然后createElement（‘名字’），然后设置属性为对应的e，导出节点，页面使用：

class text 
{
    
    
    static get(e)
    {
    
       
       var node=document.createElement('input')
       node.style.cssText=e
       return node;
    }   
}

const A=text.get`background:red;
    color:black;
`

document.body.appendChild(A)
console.log(A);
console.log(typeof A);

还真成功了，导出模块真的有趣啊！