1、引言

在react 中，styled-components 是最流行的 css in js 模式的库

2、模板字符串调用函数

    let stu = {
      name: '呆呆狗',
      age: 30,
      address: '中国'
    }
    let str = fn`你好${stu.name}今年${stu.age}岁,来自${stu.address}`

这样会报错

可以先定义一个 fn fn = '123' ，这个时候还是会报错，fn 不是一个函数，那就说明这样写其实时调用fn函数

    let stu = {
      name: '呆呆狗',
      age: 30,
      address: '中国'
    }
    function fn() {
      console.log(arguments);
      return '123'
    }
    let str = fn`你好${stu.name}今年${stu.age}岁,来自${stu.address}`
    console.log(str);

3、实现

    HTMLElement.prototype.styles = function () {
      console.log(arguments);
      let style = ''
      let key = Array.from(arguments)[0]
      let params = Array.from(arguments).slice(1)
      console.log(params, key);
      params.forEach((f, i) => {
        style += key[i] + f
      })
      console.log(style);
      this.style = style
    }
    let config = {
      styles: {
        color: 'red',
        fontSize: '20px',
        border: '1px solid green'
      }
    }
    let aEl = document.querySelector('a')
    aEl.styles`
      color:${config.styles.color};
      font-size: ${config.styles.fontSize};
      border: ${config.styles.border};
`

其实这要考虑其他的很多情况，比如 如果属性值不是 ${} 传入的呢，上面的代码只是大概的思路