search

oaknational / oak-components

A React Typescript components library for Oak National Academy Web Applications
https://components.thenational.academy
MIT License
3 stars 0 forks source link

Readme starter code error #206

Closed remy closed 2 months ago

remy commented 3 months ago

The readme has this code sample:

import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
import Head from "next/head";
import { Lexend } from "next/font/google";

const lexend = Lexend({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <Head>
        <OakGlobalStyles />
      </Head>
      <body className={lexend.className}>
        <OakThemeProvider theme={oakDefaultTheme}>{children}</OakThemeProvider>
      </body>
    </html>
  );
}

But OakGlobalStyles isn't imported.

(I should do a PR for this, but it's end of day on Friday…sorry!)

remy commented 3 months ago

I'll also add that … I don't know why, but when I add this code to my _app.tsx and I include the OakGlobalStyles in the Head element, none of the styles apply from the reset (and probably the other global styles). Once I move it out of the Head it works - seen here: https://github.com/oaknational/oak-openapi/blob/feat/landing/src/pages/_app.tsx

carlmw commented 3 months ago

🙇🏻 thanks for catching the missing (and incorrectly named) import.

I don't think it was all that clear that the example used the App router and not Pages (because of course there are multiple ways to structure stuff in Next) which is why I think it doesn't work in a Head for you. I've added a note to make it clearer.

And that's why you always leave a note.

https://github.com/oaknational/oak-components/pull/208