Chakra UI 自定义组件变体不起作用

Question

我创建了一个 customTheme 文件来扩展 Chakra，并创建了一个名为 card 的自定义组件，我希望它有适用的变体，但由于某种原因，基本样式显示并且变体永远不起作用。

扩展主题.js`

import { extendTheme } from '@chakra-ui/react';
import { ButtonStyles as Button } from './styles/components/ButtonStyles';
import { CardStyle as Card } from './styles/components/CardStyle';

const customTheme = extendTheme({
  colors: {
    brand: {
      100: '#f7fafc',
      900: '#f77070',
    },
    grey: {
      100: '#eff3fa',
    },
    blue: {
      100: '#0098ae',
    },
    red: {
      100: '#ff3d3d',
      200: '#f77070'
    },
  },
  fonts: {
    body: 'Graphik Font',
    heading: 'Graphik Font',
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  components: {
    Button,
    Card,
  }
});

export default customTheme;

`

cardStyle.js `

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

export const CardStyle = defineStyleConfig({
  // The styles all Cards have in common
  baseStyle: {
    display: 'flex',
    flexDirection: 'column',
    background: 'white',
    alignItems: 'center',
    gap: 6,
  },
  // Two variants: rounded and smooth
  variants: {
    rounded: {
      padding: 8,
      borderRadius: 'xl',
      boxShadow: 'xl',
    },
    smooth: {
      padding: 6,
      borderRadius: 'base',
      boxShadow: 'md',
    },
  },
  // The default variant value
  defaultProps: {
    variant: 'smooth',
  },
})

`

Card.jsx`

import { Box, useStyleConfig } from '@chakra-ui/react'

function CardTest(props) {
  const { variant, ...rest } = props

  const styles = useStyleConfig('Card', { variant })

  // Pass the computed styles into the `__css` prop
  return <Box __css={styles} {...rest} />
}

export default CardTest

`

将卡片包含在另一个 jsx `

<CardTest variant='rounded'>
                            <Image
                                src={imageOne}
                                rounded='full'
                                w={32}
                                h={32}
                                boxShadow='md'
                            />
                            <Heading mt={6} maxW={60} size='lg' textAlign='center' color='gray.700'>
                                Explore the outdoors
                            </Heading>
                            <Text mt={6} mb={6} size='sm' color='brand.900'>
                                some text in the card
                            </Text>
                            <Image src={imageOne} w={32} h={32} />
                        </CardTest>

`

它使用脉轮文档中的示例，但由于某种原因，变体永远不会改变，我不明白为什么当我告诉它 o 使用 Button 作为样式而不是 Card 时，变体适用于按钮。

Answer 1

您还没有包含一个片段来显示您在何处向 Chakra 的ThemeProvider提供自定义主题，因此这可以解释您的问题：

// extendTheme.js
import { extendTheme } from "@chakra-ui/react"

const theme = extendTheme({
  // ...
})
export default theme

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import theme from './extendTheme.js'

function App() {
  // Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

// Now you can use these colors in your components
function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}

https://chakra-ui.com/docs/styled-system/customize-theme