CODEWITHSUNDEEP
reactjsnext.jschakra-ui
sato desu
sato desu

Reputation: 59

I want to change the default style of the chakra ui button

I am using chakra ui.
I want to change the Button Color to #2477b3. I can change it by passing the value in the props, but it takes a lot of time and effort to pass the value in the props every time, so I want to change the default Button color, etc.
I want to use the style of the A button.
I changed the theme.ts and created a BButton, but the style did not change. I tried changing the value in theme.ts, but the color did not change.

  <Button
      size={'sm'}
      bg="#2B6CB0"
      _hover={{ bg: '#2477b3' }}
      _active={{
        bg: '#2477b3',
        transform: 'scale(0.98)',
        borderColor: '#2477b3',
      }}
      color={'#ffffff'}
    >
     AButton
    </Button>

  <Button>BButton</Button>

theme.ts

import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
        _hover: {
          _disabled: {
            bg: '#2477b3',
          },
        },
      },
      variants: {
        bg: '#2B6CB0',
        _active: {
          bg: '#2477b3',
          transform: 'scale(0.98)',
          borderColor: '#2477b3',
        },
      },
    },
  },
});

Upvotes: 2

Views: 8352

Answers (1)

Artokun
Artokun

Reputation: 573

You would need to properly define the theme override first, by setting a variant then setting the default to that variant

import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        // ...define your base styles
      },
      variants: {
        // Make a variant, we'll call it `base` here and leave it empty
        base: {},
        secondary: {
          //...define other variants        
        }
      },
      defaultProps: {
        // Then here we set the base variant as the default
        variant: 'base'
      }
    },
  },
});

Upvotes: 10

Related Questions