JavaScript 中的 StyleFunctionProps（Chakra UI）

Question

我不确定如何在我的 NextJS 项目的 Chakra UI 主题中实现 StyleFunctionProps。 Chakra 文档中的示例是在 Typescript 中编写的，但是，我使用的是 Javascript。我将如何将此示例实现为 Javascript go？

示例（在打字稿中）：

import { extendTheme } from '@chakra-ui/react'
import type { StyleFunctionProps } from '@chakra-ui/styled-system'

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

Answer 1

这与示例中的相同。 您只需要删除键入的导入/注释。

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

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

另外，你可以解构 props 参数

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

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