Chakra UI custom component variant not working

Question

I have created a customTheme file to extend the Chakra them and have created a custom component called card which I would like to have variants applicable, but for some reason the base styles show and the variants never work.

extendTheme.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

`

including the card in another 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>

`

import React from 'react';
import ReactDOM from "react-dom/client";
import { ChakraProvider } from '@chakra-ui/react';
import customTheme  from './extendTheme';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ChakraProvider theme={customTheme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
);

it uses the example off of the chakra docs but for some reason the variant never changes and I cannot see why when if i tell it o use Button as styles and not Card the variants work for button.

Answer 1

Aha! You're mapping CardStyles to Card, but actually rendering CardTest!

import { CardStyle } from './styles/components/CardStyle';

const customTheme = extendTheme({
  // ...
  components: {
    Button,
    Card: CardStyle, // targets Card component...
    CardTest: CardStyle, // ...but you're rendering CardTest
  }
});

Here's a working version, slightly simplified: https://codesandbox.io/s/so-74816092-oio6qr?file=/src/index.js

Side note, CardStyle can't apply to Card, as it's a multipart component:

• https://chakra-ui.com/docs/styled-system/component-style#single-part-and-multipart-components
• https://chakra-ui.com/docs/styled-system/advanced-theming
• https://chakra-ui.com/docs/components/card/theming

---

Outdated

You haven't included a snippet showing where you provide your custom theme to Chakra's ThemeProvider, so this may explain your issue:

// 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