CODEWITHSUNDEEP
javascriptreactjschakra-ui
Yozz
Yozz

Reputation: 485

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

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

Upvotes: 3

Views: 8524

Answers (4)

Washington Braga
Washington Braga

Reputation: 1813

If you want to change the focus border color for a single input, there is a built-in solution for that:

https://v2.chakra-ui.com/docs/components/input#changing-the-focus-and-error-border-colors

<Input focusBorderColor='pink.400' />

Upvotes: 0

ikhanuno
ikhanuno

Reputation: 1

This worked for me const baseStyle = definePartsStyle({ field: { _focusVisible: { 'border-color': '#F16821 !important', 'box-shadow': '0 0 0 1px #F16821 !important' } } });

Upvotes: 0

Gopal Das
Gopal Das

Reputation: 69

This worked for me.

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

Upvotes: 6

ellipsenotcircle
ellipsenotcircle

Reputation: 126

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

Upvotes: 2

Related Questions