Question

0

471

Visualizações

Chakra UI para React: cambiar _focus borderColor no funciona

Configuré el tema predeterminado en Chakra UI para React con extendTheme() . Cuando trato de cambiar el estilo del componente Seleccionar de esta manera, el estilo _focus no se aplica, mientras que el color se comporta como se esperaba.

referencias

subtítulos

Códigos

índice.ts

 import { extendTheme } from '@chakra-ui/react'; import { Select } from './select'; export const theme = extendTheme({ colors: { brand: '#008561', brandLight: '#00b485', }, components: { Select, }, });

seleccionar.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 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

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

Para cambiar el color del borde de foco, tienes que acceder al selector focusBorderColor ,

Esto se puede establecer en la variant que desea cambiar o en el selector predeterminado de defaultProps del tema de su componente.

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

Otra solución que he visto es establecer las sombras globales en un color de chakra, tenga en cuenta que también se puede acceder a cualquier color que defina, como en el ejemplo a continuación.

 const colors = { mycolor: "#F39C12" } const shadows = { outline: '0 0 0 3px var(--chakra-colors-mycolor-500)', }; const theme = extendTheme({ config, colors, styles, components, shadows });

Se encontró una solución alternativa aquí: Chakra-UI Issue-663

Espero que esto ayude a su proyecto

0

471