Fix global styling from react devtools

Author: CompuIves

packages/app/src/app/components/Preview/DevTools/React-Devtools/elements.ts

@@ -7,4 +7,9 @@ export const Container = styled.div`
   height: 100%;
   color: ${props =>
     props.theme['editor.foreground'] || 'rgba(255, 255, 255, 0.8)'};
+
+  * {
+    box-sizing: border-box;
+    -webkit-font-smoothing: var(--font-smoothing);
+  }
 `;

packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.js

@@ -20,7 +20,7 @@ export const getContainerStyles = props => {
         theme.templateColor ||
         theme.secondary);
   let styles = `
-    ${styleProps => styleProps.noTransition || 'transition: 0.3s ease all;'}
+    ${props.noTransition ? '' : 'transition: 0.3s ease all;'}
     position: relative;
     display: flex;
     font-size: 14px;

packages/common/src/global.css

@@ -67,3 +67,20 @@ a {
 .react-console::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.4);
 }
+
+/**
+* The React DevTools has a file called root.css with the rule
+*
+*  * {
+*   box-sizing: content-box;
+*   -webkit-font-smoothing: antialiased;
+*  }
+*
+* which changes the styles in all CodeSandbox elements. This is our current
+* hack to fix it, we have a bit more specificity so we get our stylings back until
+* the issue has been fixed.
+**/
+body * {
+  box-sizing: initial;
+  -webkit-font-smoothing: antialiased;
+}