Actualmente estoy creando una biblioteca de componentes para un proyecto siguiendo las especificaciones de diseño dadas y, por lo tanto, estoy ampliando el tema del botón predeterminado en un button.ts separado que contiene algo como esto:

 const solid: SystemStyleFunction = (props) => ({ bg: mode("tealLight", "teal")(props), color: "bgDark", borderRadius: "20px", _active: { bg: mode("white", "bgDark")(props), color: mode("bgDark", "white")(props) }, _disabled: { bg: "lightGrey", color: "grey" } }); const Button : StyleConfig = { defaultProps: { size: "md" }, variants: { solid: solid, } }; export default Button;

Funciona a las mil maravillas hasta ahora.

Ahora, el diseño dado requiere que se muestre una flecha al pasar el mouse a la derecha de la etiqueta del botón.

En los días de (S)CSS escrito a mano, simplemente habría agregado un pseudoelemento solo visible en :hover - aquí, por supuesto, ahora estoy buscando agregar _hover: { ... } a la SystemStyleFunction anterior -config.

De acuerdo con los documentos de la interfaz de usuario de Chakra, mostrar un ícono en un botón de formulario estándar se puede lograr fácilmente a través de rightIcon o leftIcon prop. Sin embargo, tengo el componente de icono listo a mano:

Los valores prop de leftIcon y rightIcon deben ser elementos de reacción, NO cadenas.

Entonces, ¿cómo se puede lograr el ícono de solo pasar el mouse entonces?

• ¿Puedo usar React.createElement(...) para definir el elemento allí mismo (o en el objeto StyleConfig al final de mi archivo)?
• ¿Puedo convertir mi button.ts en un button.tsx y luego agregar el elemento de icono en la sintaxis de estilo JSX?
• ¿Existe una forma alternativa de configurar el elemento del icono (porque la documentación dice " debería ", no " debe ")
• ¿O es imposible hacerlo con mi <Button> con estilo y se necesita un enfoque completamente diferente (si es así, tenga la amabilidad de aconsejarlo)?