Theming with styled-components

I’ve described the problem here.

I try to inject styled-components theme to every page but I only get empty theme Object prop passed.

import App, { Container } from "next/app"; // eslint-disable-line
import React from "react";
import { ThemeProvider } from "styled-components";

export default class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <ThemeProvider theme={{ color: 'blue' }}>
          <Component {...pageProps} />
        </ThemeProvider>
      </Container>
    );
  }
}

Inside some page:

const A = styled.a`
  color: ${props => {
    console.log(props.theme); // "{}"
    return "blue";
  }};
`;

[xiaoyu-tamu]

Now it works in 6.0.0-canary.4

// _app.js
import App, { Container } from 'next/app';
import React from 'react';
import { ThemeProvider } from 'styled-components';

const theme = {
  color: 'blue',
};

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
        </ThemeProvider>
      </Container>
    );
  }
}


// dir/component.js 
const Paragraph = styled.p`
  color: ${(p) => {
    console.log(p.theme);       // { color: 'blue' }
    return p.theme.color;
  }};
`;

[Inlustra]

Also have the same issue with 8.1.0, working fine in 8.0.0