<p dir="auto">As of next version <code class="notranslate">"next": "^2.0.0-beta.22"</code></p>
<p dir="auto">Whenever you use a <code class="notranslate">_document.js</code> fragment to overwrite the default construction of the page document, styles are not applied when <code class="notranslate">getInitialProps()</code> is used.</p>
<p dir="auto">If you comment out <code class="notranslate">getInitialProps()</code>, then styles will be applied. They DO NOT however hot load, and require a page refresh. Change to use <code class="notranslate">&lt;styled jsx global&gt;</code> does not resolve issue.</p>
<p dir="auto">Expected that <code class="notranslate">styled jsx</code> applies styles (global or not) regardless of the use of <code class="notranslate">getInitalProps()</code>. Also expected to hot load like any other page in the application.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    const page = renderPage()
    return { ...page }
  }

  render () {
    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;title&gt;Site Title&lt;/title&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
        &lt;style jsx global&gt;{`
          html, body {
            background-color: #f00;
            font-size: 16px;
            color: #fef;
          }
          p {
            color: red;
          }
        `}&lt;/style&gt;
      &lt;/html&gt;
    )
  }
}"><pre class="notranslate"><code class="notranslate">import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    const page = renderPage()
    return { ...page }
  }

  render () {
    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;title&gt;Site Title&lt;/title&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
        &lt;style jsx global&gt;{`
          html, body {
            background-color: #f00;
            font-size: 16px;
            color: #fef;
          }
          p {
            color: red;
          }
        `}&lt;/style&gt;
      &lt;/html&gt;
    )
  }
}
</code></pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I'd like to use a custom sub directory to store my "pages". I looked in the next.config.js but couldn't find any way of customizing it. Also, I found <a href="https://github.com/zeit/next.js/blob/07af67bfea3eb366c3b3457db9534d532d2e902b/server/build/webpack/utils.js#L4">https://github.com/zeit/next.js/blob/07af67bfea3eb366c3b3457db9534d532d2e902b/server/build/webpack/utils.js#L4</a> which makes me thing it's not possible yet.</p>
<p dir="auto">Is this something you intend to support?</p>