How Do I Preserve The Styling Of H2, H3, Etc? Problem ... - GitHub

Trang chủ » H1 Chakra Ui » How Do I Preserve The Styling Of H2, H3, Etc? Problem ... - GitHub

Có thể bạn quan tâm

Well, the solution was quite simple. All I had to do was to configure the theme file and pass it onto ChakraProvider. For anyone struggling with this, here's the code:

import { extendTheme } from "@chakra-ui/react"; export const theme = extendTheme({ fonts: { heading: 'Roboto', body: 'Roboto' }, styles: { global: { body: { bg: 'gray.50', color: 'gray.900', }, h2: { fontSize: '2xl', fontWeight: 'bold', }, h3: { fontSize: 'lg' }, h4: { fontSize: 'md' } } } });

Then wrap it around your app like this:

import { theme } from '../styles/theme'; function MyApp({ Component, pageProps }: AppProps) { return ( <ChakraProvider theme={theme}> <Component {...pageProps} /> </ChakraProvider> ); }

Also, this doc was helpful.

Từ khóa » H1 Chakra Ui