[typescript] Add test for style lib interop (#14482)

docs/src/pages/guides/interoperability/EmotionStyled.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '@material-ui/core/Button';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const StyledButton = styled(Button)`
+  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
+  border-radius: 3px;
+  border: 0;
+  color: white;
+  height: 48px;
+  padding: 0 30px;
+  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+`;
+
+function EmotionStyled() {
+  return (
+    <NoSsr>
+      <div>
+        <Button>Material-UI</Button>
+        <StyledButton>Emotion</StyledButton>
+      </div>
+    </NoSsr>
+  );
+}
+
+export default EmotionStyled;

docs/src/pages/guides/interoperability/StyledComponents.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const StyledButton = styled(Button)`
+  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
+  border-radius: 3px;
+  border: 0;
+  color: white;
+  height: 48px;
+  padding: 0 30px;
+  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+`;
+
+function StyledComponents() {
+  return (
+    <NoSsr>
+      <div>
+        <Button>Material-UI</Button>
+        <StyledButton>Styled Components</StyledButton>
+      </div>
+    </NoSsr>
+  );
+}
+
+export default StyledComponents;

package.json

@@ -79,6 +79,7 @@
     "@types/react-dom": "^16.0.9",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-text-mask": "^5.4.2",
+    "@types/styled-components": "^4.1.8",
     "@weco/next-plugin-transpile-modules": "0.0.2",
     "accept-language": "^3.0.18",
     "argos-cli": "^0.0.9",

yarn.lock

@@ -1879,6 +1879,15 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/styled-components@^4.1.8":
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.8.tgz#15c8a53bb4b9066e528fafb7558963dee5690ae0"
+  integrity sha512-NrG0wmB9Rafy5i00GFxUM/uEge148bX2QPr+Q/MI2fXrew6WOp1hN2A3YEG0AeT45z47CMdJ3BEffPsdQCWayA==
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+    csstype "^2.2.0"
+
 "@webassemblyjs/ast@1.7.11":
   version "1.7.11"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"