Question

0

470

Views

Chakra UI for React: change _focus borderColor not work

I set the default theme on Chakra UI for React with extendTheme(). When I try to change the Select component's style like this, the _focus style does not applied, while the color behaves as expected.

Refs

Captions

Codes

index.ts

import { extendTheme } from '@chakra-ui/react';
import { Select } from './select';

export const theme = extendTheme({
  colors: {
    brand: '#008561',
    brandLight: '#00b485',
  },
  components: {
    Select,
  },
});

select.ts

export const Select = {
  parts: ['field'],
  baseStyle: ({ colorMode }: any) => ({
    field: {
      color: 'brandLight',
      _focus: {
        borderColor: colorMode === 'dark' ? 'brandLight' : 'brand',
      },
    },
  }),
  sizes: {},
  variants: {},
  defaultProps: {},
};

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T06:59:25.637Z

To change the focus border color, you have to access the focusBorderColor selector,

This can either be set in the variant you want to change, or in the defaultProps selector of your component theme.

defaultProps: {
  focusBorderColor: 'gray.500',
},

Another workaround I have seen, is to set the global shadows to a chakra color, note that any color you define, can also be accessed like the example below

const colors = { mycolor: "#F39C12" }

const shadows = {
  outline: '0 0 0 3px var(--chakra-colors-mycolor-500)',
};

const theme = extendTheme({ config, colors, styles, components, shadows });

Workaround was found here: Chakra-UI Issue-663

Hope this helps your project

0

470