Fix react-dev-overlay rem style conflict (#17723)

### Don‘t use rem in react-dev-overlay.
If we create a nextjs project and use css rem. We could set the html fontsize to any 'px'.  The react-dev-overlay components styles will be affected so that the style becomes larger or smaller.

![image](https://user-images.githubusercontent.com/10840654/95490394-c189a800-09ca-11eb-816a-8bcaf6bcb657.png)
## So i suggest change the rem to px.
## After modification：
![image](https://user-images.githubusercontent.com/10840654/95490703-2e9d3d80-09cb-11eb-8369-7ec650fa6c52.png)

---

Fixes #18680

packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx

@@ -44,7 +44,7 @@ const styles = css`
   [data-nextjs-codeframe] > p > svg {
     width: auto;
     height: 1em;
-    margin-left: 0.5rem;
+    margin-left: 8px;
   }
 `
 

packages/react-dev-overlay/src/internal/components/Dialog/styles.ts

@@ -12,7 +12,7 @@ const styles = css`
     border-radius: var(--size-gap);
     box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
       rgba(0, 0, 0, 0.25);
-    max-height: calc(100% - 3.5rem);
+    max-height: calc(100% - 56px);
     overflow-y: hidden;
   }
 

packages/react-dev-overlay/src/internal/components/Toast/styles.ts

@@ -17,7 +17,7 @@ const styles = css`
   }
 
   [data-nextjs-toast-wrapper] {
-    padding: 1rem;
+    padding: 16px;
     border-radius: var(--size-gap-half);
     font-weight: 500;
     color: var(--color-ansi-bright-white);

packages/react-dev-overlay/src/internal/styles/Base.tsx

@@ -7,15 +7,15 @@ export function Base() {
       dangerouslySetInnerHTML={{
         __html: css`
           :host {
-            --size-gap-half: 0.25rem; /* 4px */
-            --size-gap: 0.5rem; /* 8px */
-            --size-gap-double: 1rem; /* 16px */
-            --size-gap-quad: 2rem; /* 32px */
+            --size-gap-half: 4px;
+            --size-gap: 8px;
+            --size-gap-double: 16px;
+            --size-gap-quad: 32px;
 
-            --size-font-small: 0.875rem; /* 14px */
-            --size-font: 1rem; /* 16px */
-            --size-font-big: 1.25rem; /* 20px */
-            --size-font-bigger: 1.5rem; /* 24px */
+            --size-font-small: 14px;
+            --size-font: 16px;
+            --size-font-big: 20px;
+            --size-font-bigger: 24px;
 
             --color-accents-1: #808080;
             --color-accents-2: #222222;
@@ -62,22 +62,22 @@ export function Base() {
           }
 
           h1 {
-            font-size: 2.5rem;
+            font-size: 40px;
           }
           h2 {
-            font-size: 2rem;
+            font-size: 32px;
           }
           h3 {
-            font-size: 1.75rem;
+            font-size: 28px;
           }
           h4 {
-            font-size: 1.5rem;
+            font-size: 24px;
           }
           h5 {
-            font-size: 1.25rem;
+            font-size: 20px;
           }
           h6 {
-            font-size: 1rem;
+            font-size: 16px;
           }
         `,
       }}

packages/react-dev-overlay/src/internal/styles/CssReset.tsx

@@ -52,7 +52,7 @@ export function CssReset() {
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
               'Noto Color Emoji';
-            font-size: 1rem;
+            font-size: 16px;
             font-weight: 400;
             line-height: 1.5;
             color: #212529;
@@ -77,12 +77,12 @@ export function CssReset() {
           h5,
           h6 {
             margin-top: 0;
-            margin-bottom: 0.5rem;
+            margin-bottom: 8px;
           }
 
           p {
             margin-top: 0;
-            margin-bottom: 1rem;
+            margin-bottom: 16px;
           }
 
           abbr[title],
@@ -97,7 +97,7 @@ export function CssReset() {
           }
 
           address {
-            margin-bottom: 1rem;
+            margin-bottom: 16px;
             font-style: normal;
             line-height: inherit;
           }
@@ -106,7 +106,7 @@ export function CssReset() {
           ul,
           dl {
             margin-top: 0;
-            margin-bottom: 1rem;
+            margin-bottom: 16px;
           }
 
           ol ol,
@@ -121,12 +121,12 @@ export function CssReset() {
           }
 
           dd {
-            margin-bottom: 0.5rem;
+            margin-bottom: 8px;
             margin-left: 0;
           }
 
           blockquote {
-            margin: 0 0 1rem;
+            margin: 0 0 16px;
           }
 
           b,
@@ -186,12 +186,12 @@ export function CssReset() {
 
           pre {
             margin-top: 0;
-            margin-bottom: 1rem;
+            margin-bottom: 16px;
             overflow: auto;
           }
 
           figure {
-            margin: 0 0 1rem;
+            margin: 0 0 16px;
           }
 
           img {
@@ -209,8 +209,8 @@ export function CssReset() {
           }
 
           caption {
-            padding-top: 0.75rem;
-            padding-bottom: 0.75rem;
+            padding-top: 12px;
+            padding-bottom: 12px;
             color: #6c757d;
             text-align: left;
             caption-side: bottom;
@@ -222,7 +222,7 @@ export function CssReset() {
 
           label {
             display: inline-block;
-            margin-bottom: 0.5rem;
+            margin-bottom: 8px;
           }
 
           button {
@@ -311,8 +311,8 @@ export function CssReset() {
             width: 100%;
             max-width: 100%;
             padding: 0;
-            margin-bottom: 0.5rem;
-            font-size: 1.5rem;
+            margin-bottom: 8px;
+            font-size: 24px;
             line-height: inherit;
             color: inherit;
             white-space: normal;