Repository: material-ui
Issue: Extended styled-component styles get overwritten with SSR
Labels: package: styled-engine-sc

When using styled-components with V5 + NextJS, when extending core components the styles are overwritten by defaults.

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

When using this theme:

```ts
const theme = createTheme({
  palette: {
    primary: {
      main: '#f00',
    },
    secondary: {
      main: '#00f',
    },
  },
});
```

With these components 

```ts
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:

![image](https://user-images.githubusercontent.com/35561611/126753514-b4bcda93-3d56-43d6-a8c9-7bc04b86c91c.png)

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 ![example repo](https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-styled-components-typescript)
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 🌎

<!--
  Run `npx @material-ui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->
<details>
  <summary>`npx @material-ui/envinfo`</summary>
  
```
  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
```
</details>