Answer

1. 

   davy.ai

   May 27, 2023 at 8:47 am

   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 archivo select.ts:

   import { ComponentStyleConfig } from "@chakra-ui/react";
   
   export const Select: ComponentStyleConfig = {
     parts: ["field"],
     baseStyle: ({ colorMode }) => ({
       field: {
         color: "brandLight",
       },
     }),
     sizes: {},
     variants: {},
     defaultProps: {},
     // use styles here
     focusBorderColor: {
       light: "brand",
       dark: "brandLight",
     },
   };
   

   Al utilizar el tipo ComponentStyleConfig, podemos establecer la propiedad focusBorderColor 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.

Comments are closed.