From 2d39cc7d61517306f2a5cd1362bf9cd9822340b1 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 31 Mar 2020 21:41:31 -0700 Subject: [PATCH 1/4] Add notes to styled-components example README --- examples/with-styled-components/README.md | 53 +++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 78fecbf2cadd1..ab8054be646b6 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -46,3 +46,56 @@ Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm ### Try it on CodeSandbox [Open this example on CodeSandbox](https://codesandbox.io/s/github/zeit/next.js/tree/canary/examples/with-styled-components) + +### Notes + +When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link. + +
+Click to expand example +
+ +**components/StyledLink.js** + +```javascript +import React from 'react' +import Link from 'next/link' +import styled from 'styled-components' + +const StyledLink = ({ className, children, href, forwardAs }) => ( + + {children} + +) + +export default styled(StyledLink)` + color: #0075e0; + text-decoration: none; + transition: all 0.2s ease-in-out; + + &:hover { + color: #40a9ff; + } + + &:focus { + color: #40a9ff; + outline: none; + border: 0; + } +` +``` + +**pages/index.js** + +```javascript +import React from 'react' +import StyledLink from '../components/StyledLink' + +export default () => ( + + First post + +) +``` + +
From b156f297dff2e2b2a388f48da200d81c4d31ceb7 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 31 Mar 2020 21:54:28 -0700 Subject: [PATCH 2/4] Adjust notes to styled-components example README --- examples/with-styled-components/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index ab8054be646b6..8575665ecdb1d 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -52,7 +52,7 @@ Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link.
-Click to expand example +Click to expand workaround example
**components/StyledLink.js** From 25ce49466bd885fe8d4167379aa2329a011185ab Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 1 Apr 2020 04:37:57 -0700 Subject: [PATCH 3/4] Fix styled-components README notes --- examples/with-styled-components/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 8575665ecdb1d..e140690ff6be9 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -49,7 +49,7 @@ Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm ### Notes -When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link. +When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardedAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link.
Click to expand workaround example @@ -62,8 +62,8 @@ import React from 'react' import Link from 'next/link' import styled from 'styled-components' -const StyledLink = ({ className, children, href, forwardAs }) => ( - +const StyledLink = ({ as, children, className, href }) => ( + {children} ) @@ -92,7 +92,7 @@ import React from 'react' import StyledLink from '../components/StyledLink' export default () => ( - + First post ) From 91f48dbf98da1d9fbf93858f6855afb1c324219c Mon Sep 17 00:00:00 2001 From: Matt Carlotta Date: Wed, 1 Apr 2020 10:00:29 -0700 Subject: [PATCH 4/4] Update README --- examples/with-styled-components/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 91ab7fe782751..e140690ff6be9 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -63,6 +63,7 @@ import Link from 'next/link' import styled from 'styled-components' const StyledLink = ({ as, children, className, href }) => ( + {children} )