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

我将Next.js与样式化jsx以及stylelint一起使用，直到我开始在样式化jsx中使用

变量

，因为stylelint在这些变量上抛出

stylelint（CssSyntaxError）

比如说

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

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

const按钮=（{color}）=>(
你好，世界！
{`
钮扣{
颜色：${color | |'blue'}；
^^^^^未知字（CssSyntaxError）
}
`}
)

---

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

是否尝试将变量重命名为其他变量？customColor例如？您是否尝试将变量重命名为其他名称？定制颜色，例如？