0
469
VistasChakra 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: {}, };1 Respuestas
Responde la pregunta0
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