Una breve discusión sobre la implementación simple de componentes con estilo en React

Hoy escribí sobre la biblioteca de componentes con estilo. Descubrí que una biblioteca tan poderosa es realmente asombrosa. Luego pasé media hora pensando en una implementación simple de esta biblioteca. ¡No parece ser difícil! En otras palabras, el uso básico de los componentes con estilo es muy simple:

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>

Si miras más de cerca, parece ser una clase llamada estilo importado, y esta clase tiene muchos, muchos métodos estáticos. En pocas palabras, debería haber varios métodos para varias etiquetas html, pero de repente parece que no. El caso. Después de todo, nadie es tan estúpido. Escribir tantas funciones significa reutilizar. Use la interfaz para declarar la interfaz para restringirla, pero definitivamente es inseparable de la forma de entrada. Luego podemos escribir una para simplemente simularla, cree una interfaz get y absorba los parámetros ``, luego conviértalos en estilos css, cree los nodos correspondientes, hablando correctamente, debe determinar el nombre del nodo pasado por el usuario, luego crearElement ("nombre"), y luego establezca el atributo en la e correspondiente, exporte el nodo y use la página:

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

Realmente funcionó. ¡Exportar el módulo es realmente divertido!