StyleFunctionProps in JavaScript (Chakra UI)

Question

我不知道如何在我的StyleFunctionProps项目的Chakra主题中实现NextJS。脉轮文献中的示例是用类型记录编写的，但是，我使用的是Javascript。如何将此示例实现为Javascript？

示例(在打字本中)：

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',
        }),
      },
    },
  },
})