如何解决“styled-jsx”中变量名的“未知单词（CssSyntaxError）”（stylelint）

Question

我将Next.js与styled-jsx和stylelint一起使用，一切都很顺利，直到我开始variables在styled-jsx中使用，因为 stylelint 会抛出stylelint(CssSyntaxError)这些变量。

例如

const Button = ({ color }) => (
  <>
    <button>Hello World!</button>

    <style jsx>{`
      button {
        color: ${color || 'blue'};
                 ^^^^^ Unknown word (CssSyntaxError)
      }
    `}</style>
  </>
)

我不知道如何修复它，或者它是否有任何可以提供帮助的插件。