Created Global styles and layouts (markdown)

2024-01-19 02:48:18 +00:00 · 2016-11-13 15:43:34 -08:00 · 2016-11-13 15:43:34 -08:00 · bd367022ae
parent edada2f1e0
commit bd367022ae
1 changed files with 116 additions and 0 deletions
--- a/Global-styles-and-layouts.md
+++ b/Global-styles-and-layouts.md
@ -0,0 +1,116 @@
+This page will answer:
+- How to configure typefaces
+- How to set global styles like
+ - Your page's background color
+ - Your global font size and family configuration
+
+The easiest way to accomplish it is by using the [`<Head>` component](https://github.com/zeit/next.js#head-side-effects). For example, in `pages/index.js`:
+
+```jsx
+import React from 'react'
+import Head from 'next/head'
+export default () => (
+  <Head>
+    <style>{`
+      body { 
+        background: #000;
+        font: 11px menlo;
+        color: #fff;
+      }
+    `}</style>
+  </Head>
+)
+```
+
+Now, how do you do this for every page? In Next.js there's no concept of "global layout". Every page in your Next.js project is _complete_ and _self-sufficient_.
+
+If you've used WordPress in the past, it's similar to how every core template page has to invoke `get_header` and `get_footer`.
+
+So, the easiest solution is to have your pages invoke custom header and footer components.
+
+```jsx
+import React from 'react'
+import Header from '../components/header'
+import Header from '../components/footer'
+export default () => (
+  <div>
+    <Header />
+    <p>hi there</p>
+    <Footer />
+  </div>
+)
+```
+
+For that example, your directory structure would look like:
+
+```
+components/
+  header.js
+  footer.js
+pages/
+  index.js
+```
+
+Notice that `components/` is completely arbitrary, but I happen to like that strucutre. Then `components/header.js` can introduce the `<Head>` `<style />`, so that it gets applied to every page:
+
+```jsx
+import React from 'react'
+import Head from 'next/head'
+export default () => (
+  <header>
+    <Head>
+      <style>{`
+        body {
+          color: red
+        }
+      `}</style>
+    </Head>
+  </header>
+)
+```
+
+It's also possible to create "master layouts" that embed these components on your behalf, by leveraging React's `children` property.
+
+For example, you can introduce `layouts/main.js`: 
+
+```
+components/
+  header.js
+  footer.js
+pages/
+  index.js
+layouts/
+  main.js
+```
+
+and the component can act as a wrapper:
+
+```jsx
+import React from 'react'
+import Header from '../components/header'
+import Header from '../components/footer'
+export default ({ children }) => (
+  <div>
+    <Header />
+    { children }
+    <Footer />
+  </div>
+)
+```
+
+with this in place, your resulting `pages/index.js` can look as follows:
+
+```jsx
+import React from 'react'
+import Page from '../layouts/main'
+export default () => (
+  <Page>
+    <p>my page with global styles!</p>
+  </Page>
+)
+```
+
+Some notes:
+- JSX escaping can sometimes get in the way of your `<style>` content. If this happens to you, you'll have to use [`dangerouslySetInnerHTML` instead](https://github.com/facebook/react/issues/3496#issuecomment-105676206)
+- How about pages with different global styles? You can configure multiple layouts, or pass props to `<Header>` or `<Page>`. For example, `<Page dark={true}>` to embed styles that set the background to black and the font color to white and then embed a different `<style>` element based on `this.props.dark` within that component.
+- How about server rendering? `<Head>` takes care of shipping the underlying `<style>` in the `<head>` automatically when server rendering!