Thanks Richard. You can pass these global styles into your theme object. Something like this.
const theme = { styles: { global: { "html, body": { fontFamily: "something", color: "gray.900", ...etc }, a: { color: "pink.400", }, button: { ... } }, }, }
Then pass your theme to your provider that wraps your app.
Thank you Kieran! Yes I found this in the docs but I don't know how to pass it and where.... I tried to pass in _app.js like so:
_app.js
import { ChakraProvider, CSSReset } from '@chakra-ui/react'; const theme = { styles: { global: (props) => ({ 'html, body': { height: '100%', }, }), }, }; function MyApp({ Component, pageProps }) { return ( <ChakraProvider theme={theme}> <CSSReset /> <Component {...pageProps} /> </ChakraProvider> ); } export default MyApp;
But it seems it's not working π€¨
Checked my code this is what I've got. Try the extendTheme function and passing resetCSS as a prop to the provider.
import { ChakraProvider, extendTheme } from "@chakra-ui/react"; const config = { initialColorMode: "light", useSystemColorMode: true }; export const theme = extendTheme({ config, styles: { global: { a: { fontSize: "sm", }, }, ... more stuff }, }); const MyApp = ({ Component, pageProps }: AppProps): React.ReactElement => { return ( <ChakraProvider resetCSS={true} theme={theme}> <Component {...pageProps} /> </ChakraProvider> ); };
aaaaah!! Thank you very much!!!! β¨
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks Richard. You can pass these global styles into your theme object. Something like this.
Then pass your theme to your provider that wraps your app.
Thank you Kieran! Yes I found this in the docs but I don't know how to pass it and where.... I tried to pass in
_app.js
like so:But it seems it's not working π€¨
Checked my code this is what I've got. Try the extendTheme function and passing resetCSS as a prop to the provider.
aaaaah!! Thank you very much!!!! β¨