Chakra UI for React: change _focus borderColor not work

Question

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

• Chakra-UI Style Props
• How to change the placeholder color globally?

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: {},
};

Answer 1

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