Extended styled-component styles get overwritten with SSR

When using styled-components with V5 + NextJS, when extending core components the styles are overwritten by defaults.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using this theme:

const theme = createTheme({
  palette: {
    primary: {
      main: '#f00',
    },
    secondary: {
      main: '#00f',
    },
  },
});

With these components

import { ThemeProvider, Box, Button } from '@material-ui/core';
import styled from 'styled-components';

const Example = styled(Box)`
  ${({ theme }) => {
    return {
      backgroundColor: theme.palette.primary.main,
      width: '200px',
      height: '200px',
    }
  }}
`;

const Example2 = styled(Button)`
  border: none;
`;

<ThemeProvider>
  <Example bgcolor="secondary.main" />
  <Example2 variant="outlined">Test</Example2>
</ThemeProvider>

I get this result:

The problem happens with <StyledEngineProvider injectFirst /> and without.

Expected Behavior 🤔

The styles given in the styled() definitions should take priority and be injected after the defaults.

Steps to Reproduce 🕹

Using the new nextjs styled-components example:
https://codesandbox.io/s/festive-dew-kh20g (content in pages/_app.js)

Steps:

1. Clone the
2. Create a styled component that extends off a core component with base styles

Context 🔦

This has happened when I was trying to change a button border from within styled-components. I'm aware this is possible through the theme but I needed some extra customisation.

Your Environment 🌎

  Chrome 91.0.4472.164
  System:
    OS: macOS 11.2.3
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.22.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chrome: 91.0.4472.164
    Edge: Not Found
    Firefox: 89.0.2
    Safari: 14.0.3
  npmPackages:
    @material-ui/core: next => 5.0.0-beta.1
    @material-ui/private-theming:  5.0.0-beta.1
    @material-ui/styled-engine:  5.0.0-beta.1
    @material-ui/styled-engine-sc: next => 5.0.0-beta.1
    @material-ui/system:  5.0.0-beta.1
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.40
    @material-ui/utils:  5.0.0-beta.0
    @types/react: latest => 17.0.14
    react: latest => 17.0.2
    react-dom: latest => 17.0.2
    styled-components: latest => 5.3.0
    typescript: latest => 4.3.5