NextJS项目中用JavaScript实现Chakra UI的StyleFunctionProps

直接将TypeScript示例转换为JavaScript非常简单，只需移除TypeScript特有的类型相关语法即可，具体改动如下：

• 删掉类型导入语句：import type { StyleFunctionProps } from '@chakra-ui/styled-system'，JavaScript不需要类型声明
• 移除函数参数的类型标注：把(props: StyleFunctionProps)改为(props)

转换后的完整JavaScript代码：

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        solid: (props) => ({
          bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
        }),
      },
    },
  },
})

你可以像在TypeScript中一样，通过props访问colorMode、theme等Chakra提供的上下文属性，逻辑完全不需要调整。

内容的提问来源于stack exchange，提问作者Rackodo