DEV Community

Discussion on: I built a full stack serverless e-commerce site with Next.js. What I learned and how it might help you

View post

Replies for: Thanks Richard. You can pass these global styles into your theme object. Something like this. const theme = { styles: { global: { "h...

Collapse
 
nemethricsi profile image
Richard •

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:

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;
Enter fullscreen mode Exit fullscreen mode

But it seems it's not working 🤨

Thread Thread
 
kieran6roberts profile image
Kieran Roberts •

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>
  );
};
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
nemethricsi profile image
Richard •

aaaaah!! Thank you very much!!!! ✨