标记的模板文字函数中的箭头函数为空

Question

我正在尝试破译样式组件的工作原理。我得到了大部分，但插值。考虑这个组件：

const display = 'flex'

const Container = styled.div`
  background-color: red;
  color: ${(props) => props.color};
  display: ${display};
`

接收样式的函数是这样的：

const styled = {
   div: (string, ...values) => {
      return ({children, ...props}) => {
        const styles = tag(string, props, ...values);
        return <div style={styles}>{children}</div>
      }
    }
}

字符串在这种情况下是：["\n background-color: red;\n color: ",";\n display: ",";\n"]

值记录为：[null,"flex"]

第一个插值（箭头函数）为空。

styled-components 如何解决这个问题？

Answer 1

它似乎在 Chrome 中工作正常。我在 VSCode 的操场上尝试了它，在那里我得到了空值。

标记的模板文字函数中的箭头函数为空

Arrow function is null inside tagged template literal function

javascript

jsx

styled-components