Link component not getting styled by <style jsx>

[tmayr]

When using scoped <style jsx> and having a <Link> element, the produced <a> don't get any style.

I do believe however, this is intentional, as the scope will only bind to that specific component it was declared from, however, it seems a bit confusing trying to use and style <Link> from the parent component and getting this result.

Is there any way to keep the scope, and style just <Link> childrens?
Or maybe a way to force/include the style leakage to NextJS components/helpers?

Source:
Version: 2.0.0 Beta 12
https://nextjs-unstyled-link-exgwwtxueh.now.sh
https://nextjs-unstyled-link-exgwwtxueh.now.sh/_src/?f=pages%2Findex.js

[arunoda]

I hope this is related to this: #272
You need to provide a child <a/> component inside the `

Then you can style that <a/> tag as you want.

[tmayr]

Yeah, using an <a/> inside <Link> works but...

Even if #272 passes, if you don't provide a children, the same behavior will occur.

Seems pretty counter intuitive to stick your <a> in there, when <Link> actually provides one too if you don't specify any element, and you can't add an href to the child anchor, otherwise, it'll break <Link as>. (Not supporting className is also quite odd)

[rauchg]

It's by design that elements that are not statically present don't get styles. The goal is to avoid implicit side-effect styles, which is the main issue with CSS in my opinion.

You can still access the element through "global selectors" by using something like:

p > :global(a) {
  color: red;
}

But that's just a escape-hatch. I think it's always best to pass an element to <Link>. Recently I've actually started advocating for the idea of not supporting automagically creating an element, in fact.

[tmayr]

I wasn't aware of global selectors, they look very useful, thanks for the link. Not automatically creating the element would for sure clear up some confusion. Link would only help with router and aliases then? That would make total sense, just help out with things that the anchor cannot solve. No confusion at all and would be pretty clear that you need to include an anchor to complete functionality and enable scoped styling.

…

On Mon, Jan 2, 2017, 12:03 AM Guillermo Rauch ***@***.***> wrote: It's *by design* that elements that are *not statically present* don't get styles. The goal is to avoid *implicit side-effect styles*, which is the main issue with CSS in my opinion. You can still access the element through "global selectors" <https://github.com/zeit/styled-jsx#global-selectors> by using something like: p > :global(a) { color: red; } But that's just a escape-hatch. I think it's always best to pass an element to <Link>. Recently I've actually started advocating for the idea of not supporting automagically creating an element, in fact. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#610 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAyV5tDFy6weS0kGQfbXCvS9Pf3Qv8lNks5rOGkbgaJpZM4LYzvS> .

[rauchg]

Yep @tmayr. Thanks for your feedback, I think we can start displaying a warning and eventually deprecate it.

[tmayr]

Thanks for the clarification and open discussion!

…

On Mon, Jan 2, 2017, 12:10 AM Guillermo Rauch ***@***.***> wrote: Yep @tmayr <https://github.com/tmayr>. Thanks for your feedback, I think we can start displaying a warning and eventually deprecate it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#610 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAyV5kKxAiYUMmH6thiZ7iyShHVDaoXnks5rOGqygaJpZM4LYzvS> .