macaronのDynamic StylingでCSSが効かない

症状

バージョン（抜粋）

code:package.json

"@macaron-css/core": "^1.2.0",

"@macaron-css/react": "^1.4.0",

"@macaron-css/vite": "^1.3.0",

"react": "^18.2.0",

CSSが効かなかったコンポーネント

文字色が変わらない

code:MyButton.tsx

import { createVar, fallbackVar } from '@macaron-css/core'

import { styled } from '@macaron-css/react'

const colorVar = createVar()

const Button = styled('button', {

base: {

color: fallbackVar(colorVar, 'red'),

border: 'none',

},

})

interface Props {

color: string

}

export const MyButton = ({ color }: Props) => {

return (

<Button

style={{

}}

Click me

</Button>

)

}

コンソール

code:error

Warning: Unsupported style property var(--sx5a400). Did you mean var(-sx5a400)? react-dom.development.js:86

対応

code:fix.tsx

import { assignInlineVars } from '@macaron-css/core/dist/dynamic'

// 略

<Button

style={assignInlineVars({

})}

Click me

</Button>

原因はよくわからない