Question

是否可以在styled-components组件中定义变量？

希望下面的代码（不工作）显示我正在追求的内容：

const Example = styled.div`
  ${const length = calc(vw - props.someValue)}

  width: ${length};
  &.disable {
    width: ${length};
  }  
`

Answer 1

根据我的 模板文字的 指南，此代码无效。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

模板文字是包含div之后的代码的反引号。

const示例= styled.div` here `

让我们说：

const num = 10;
console.log(\`The number I saved in a variable is ${num}\`);

输出日志为："The number I saved in a variable is 10"

在模板文字内部，您可以拥有表达式。在内部声明变量是不可能的，因为它的声明： http://2ality.com/2012/09/expressions-vs-statements.html

所以这个问题更多的是关于 Javascript 的核心，然后是styled-components本身。

Answer 2

使用CSS变量的可能解决方法，但没有支持。

const Example = styled.div`
  --length: calc(vw - props.someValue)

  width: calc(var(--length));
  &.disable {
    width: calc(var(--length));
  }  
`

在样式组件中定义变量

2 个答案: