next.js - 如何解决`styled-jsx`（stylelint）中变量名的`Unknown word (CssSyntaxError)`

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

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