How to use the styled-components.ServerStyleSheet function in styled-components

To help you get started, we’ve selected a few styled-components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github c8r / x0 / lib / static / css.js View on Github external
let version

  libs.forEach(name => {
    if (Object.keys(dependencies).includes(name)) {
      lib = name
      version = dependencies[lib]
    }
  })

  switch (lib) {
    case 'styled-components':
      // wtf this api is convoluted af
      // seems like this needs the components to render inside
      // one of these functions
      const { ServerStyleSheet } = require('styled-components')
      const sheet = new ServerStyleSheet()

      // console.log('sheet instance', sheet.create)
      // const css = sheet.getStyleTags()

      // could return react elements here
      // const css = sheet.getStyleElements()
      break
    // case 'glamorous':
    case 'cxs':
      const cxs = require('cxs')
      const css = cxs.css()
      return css
    default:
      return ''
  }
github recruit-tech / redux-pluto / src / server / middlewares / reduxApp.tsx View on Github external
useragent,
}: {
  res: Response;
  store: Store;
  renderProps: any;
  config: any;
  clientConfig: any;
  timing: any;
  title: string;
  useragent: ExpressUseragent.UserAgent;
}) {
  /*
   * メインコンテンツをレンダリングします。
   */

  const sheet = new ServerStyleSheet(); // <-- creating out stylesheet
  const jsx = sheet.collectStyles();
  const content = renderToString(jsx);
  const styles = sheet.getStyleElement();

  const { routes } = renderProps;
  const status = routes[routes.length - 1].status || 200;

  const chunkNames = flushChunkNames();
  const assets = flushChunks(config.clientStats, { chunkNames });

  sendSSRResponse({
    res,
    status,
    store,
    content,
    clientConfig,
github MicroBenz / YWC15-FrontEnd / pages / _document.js View on Github external
render() {
    const sheet = new ServerStyleSheet();
    const main = sheet.collectStyles(<main>);
    const styleTags = sheet.getStyleElement();
    return (
      
        
          <title>{seo.title}</title>
          
          
          
          {/*  */}
          {/*  */}

          
          
          
</main>
github hiroppy / ssr-sample / src / server / controllers / renderer / renderer.tsx View on Github external
export async function get(req: Request, res: Response) {
  const baseUrl = `${req.protocol}://${req.get('Host')}`;
  const { nonce }: { nonce: string } = res.locals;
  const { store, runSaga } = configureStore();
  const client = createClient({ link: new SchemaLink({ schema }) });
  const sheet = new ServerStyleSheet();
  const context = {};

  // for Node.js because `fetch` requires absolute URLs
  store.dispatch(setBaseUrl(baseUrl));

  const App = () =&gt; (
    
      
        
          {/* add `div` because of `hydrate` */}
          <div id="root">
            
          </div>
github primer / design / pages / _document.js View on Github external
static getInitialProps({renderPage}) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App =&gt; props =&gt; sheet.collectStyles())
    return {
      ...page,
      styles: (
        &lt;&gt;
          
          
          {sheet.getStyleElement()}
        
      )
    }
  }
github michaltakac / mathworldvr / pages / _document.tsx View on Github external
static async getInitialProps(ctx: any) {
    const sheet = new ServerStyleSheet();

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =&gt;
      originalRenderPage({
        enhanceApp: App =&gt; props =&gt; sheet.collectStyles()
      });

    const initialProps: any = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [...initialProps.styles, ...sheet.getStyleElement()]
    };
  }
github prisma / graphql-europe-2018 / pages / _document.js View on Github external
static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App =&gt; props =&gt;
      sheet.collectStyles(),
    )
    const styleTags = sheet.getStyleElement()
    return { ...page, styleTags }
  }
github Dazzboard / dazzboard / pages / _document.js View on Github external
static getInitialProps ({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App =&gt; props =&gt; sheet.collectStyles())
    const styleTags = sheet.getStyleElement()
    const styles = flush()
    return { ...page, styleTags, styles }
  }
github smooth-code / smooth.js / packages / smooth-plugin-styled-components / src / smooth-node.js View on Github external
export function wrapRootElement({ element, pathname }) {
  const sheet = new ServerStyleSheet()
  sheetByPathname.set(pathname, sheet)
  return {element}
}
github wonism / gatsby-advanced-blog / gatsby-ssr.js View on Github external
export const replaceRenderer = ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents
}) => {
  const sheet = new ServerStyleSheet();
  const body = renderToString(sheet.collectStyles(bodyComponent));

  replaceBodyHTMLString(body);
  setHeadComponents([sheet.getStyleElement()]);

  return;
};