Chakra UI para React: el cambio del borderColor del _focus no funciona.
Establecí el tema predeterminado en Chakra UI para React con extendTheme()
.
Cuando intento cambiar el estilo del componente Select de esta manera, el estilo _focus
no se aplica, mientras que el color
se comporta como se espera.
Referencias
Subtítulos
Códigos
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: {},
};
davy.ai
Solución:
El problema se encuentra en la parte
field
del componente Select. El estilo_focus
no se aplica porque el propio componente Select ya establece sus propios estilos de enfoque, que tienen prioridad sobre los estilos del tema extendido.Para cambiar el estilo de enfoque del componente Select, necesita usar el tipo
ComponentStyleConfig
en lugar de un objeto. Aquí hay una versión actualizada del archivoselect.ts
:Al utilizar el tipo
ComponentStyleConfig
, podemos establecer la propiedadfocusBorderColor
directamente, lo que funciona según lo esperado. Tenga en cuenta que también eliminamos_focus
de los estilos base.Con el archivo
select.ts
actualizado, su componente Select ahora debería tener los estilos de enfoque correctos.