Estoy usando Chakra Ui con React y estoy tratando de usar dos fuentes diferentes para dos componentes, ya las importé usando el método Global descrito en los documentos, pero ¿cómo puedo usar solo la fuente secundaria en mi componente actual?
Cuando te refieres a la secundaria, ¿supongo que esta es tu fuente secundaria? Si es así, hay dos cosas que debe tener en cuenta. Es la tecla textStyles y la función extendTheme de Chakra UI:
Importe la función extendTheme importada desde Chakra UI.
import { extendTheme } from "@chakra-ui/react"El uso de la función extendTheme le permitirá agregar nuevos estilos. Aquí es donde colocará la clave textStyles :
const themeExample = extendTheme({ // Whatever you pass here will be ADDED to the theme. textStyles: { primary: { fontFamily: "Font Primary" }, secondary: { fontFamily: "Font Secondary" }, }, });Ahora que las fuentes deseadas están configuradas, son fácilmente accesibles:
<Box textStyle='primary'>Component One</Box> <Box textStyle='secondary'>Component Two</Box>Puede encontrar más información aquí: https://chakra-ui.com/docs/features/text-and-layer-styles