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

[Richard]

Nice summary! 👏 I’m experiencing with very similar stack!
Maybe it’s a silly question, but do you know exactly how to inject Global styles in Chakra Ui? I didn’t find the best documentation for this. For example you wanna do html, body { 100%;}

[Kieran Roberts]

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.

[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;

But it seems it's not working 🤨

[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>
  );
};

[Richard]

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