Chakra UI for React: change _focus borderColor not work

user_2470047 0
Viewed 2193

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

enter image description here

enter image description here

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: {},
};
chakra-ui reactjs javascript
2 Answers

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

user_139693150

This worked for me.

 _focusVisible={{
      outline: "none",
 }}
user_136015340
Related