Next.js: 스타일이 지정된 구성 요소로 연결

Chrome에서 href 속성 없이 a 태그를 사용할 때 정확한 문제가 발생했습니다. 링크로 스타일이 지정되지 않았으며 일반 링크의 브라우저 접근성 기능이 없습니다. 효과가 있었던 것은 a 태그에 빈 href 를 사용하는 것이었습니다.

이것도 경험합니다.

해결 방법은 공백보다 href를 두 번째로 포함하는 것이 더 나을 것입니다. 브라우저 URL 미리보기 전용인 경우.

태그를 사용하는 대신 구성 요소를 styledcomponents에 전달할 수 있습니다.
https://github.com/styled-components/styled-components#third -party-components

import Link from 'next/link'
const StyledLink = styled(Link)`
  color: red;
  background: blue;
`

그걸 써

export default () => (<div><StyledLink href="mylink">MyText</StyledLink></div>)

@kennylavender 감사합니다. 시도해보겠습니다!

@sedubois 가 효과가 있었나요? className을 Link에 전달할 수 없으므로 작동하지 않을 것이라고 생각합니다.

@luisrudge 는 아직 시도하지 않았습니다. 지금 해결 방법은 충분했으며 styled-jsx를 직접 사용할 수 있는지 한 번 더 시도하겠습니다...

작동하지 않는 것으로 확인되면 알려주고 다시 열 수 있습니다.

@sedubois @kennylavender 의 솔루션이 작동하지 않는 것을 확인할 수 있습니다. 이 문제를 다시 여는 것이 좋습니다.

pull 요청을 만들어 nextjs 링크 구성 요소가 이를 지원하도록 하거나 styledcomponents와 함께 작동하는 고유한 버전의 nextjs 링크 구성 요소를 만들 수 있습니다. 링크 코드를 보지 않고 앵커 요소에 소품을 전달하지 않는 것처럼 들립니다.

nextjs 라우터 를 가져와서 자신만의 라우터를 만든 다음 styledcomponents가 https://www.styled-components.com/docs/basics#styling -any-components 구성 요소의 스타일을 지정하도록 할 수 있습니다.

여기에 간단한 예가 있습니다. 이 코드를 여기에 직접 작성했을 뿐이며 테스트하지 않았으므로 예제로만 사용하십시오.

// my-app-link.js
import React from 'react'
import PropTypes from 'prop-types' // Import this from react if your using an older version.
import Router from 'next/router'

const handler = (href) => Router.push(href);

const Link = ({className, children, href, ...rest}={}) => (
  <a onClick={() => handler(href)} className={className} {...rest} >{children}</a>
);

Link.propTypes = {
  className: PropTypes.string,
  href: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
  ]),
  children: PropTypes.node,
}

export default Link;

@kennylavender 좋은 접근 방식이지만 href 속성을 렌더링하지 않기 때문에 충분하지 않다고 생각합니다(대신 onClick 이벤트를 사용 중입니다). 그래서... 이 접근 방식이 SEO에 얼마나 좋은가요? 다른 대안?

더 나아가야 하는 예시일 뿐입니다. 내가 게시한 코드 위에 href 속성을 추가할 수 있고 확실히 추가해야 합니다. nextjs/link가 어떻게 구현되는지 살펴보고 어떻게 하는지 알아보세요.

얘들 아. 3.0.1-beta.13+ 버전에서 passHref 를 Link (부울 속성으로)로 설정하여 href 를 styled-components (또는 해당 라이브러리를 래핑하는 다른 라이브러리)에 노출할 수 있습니다. <a/> 태그).

문제의 첫 번째 예를 사용하면 다음과 같이 할 수 있습니다.

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href} passHref>
    <StyledLink>{name}</StyledLink>
  </Link>
)

참고: next-routes 를 사용하는 경우 다음과 같이 표시됩니다.

export default ({route, params, children}) => (
  <Link route={route} params={params} passHref>
    <StyledLink>{children}</StyledLink>
  </Link>
)

className 소품을 직접 Link 로 우회하여 올바른 범위에서 스타일을 확장할 수 있도록 @vjpr 솔루션을 개선했습니다.

링크.js

export default ({ route, params, children, className }) => (
  <Link route={route} params={params} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
)

다른 구성 요소.js

import Link fron 'components/Link';

const RedLink = styled(Link)`
  background-color: red;
`

@torresandres 의 약간 개선된 버전으로, Link 를 가져오는 모든 구성 요소에 스타일이 지정된 구성 요소를 만들 필요가 없도록 구성 요소 내부의 링크 스타일을 지정합니다.

링크.js

const StyledLink = styled.a`
  //styles
`
export default ({ route, params, href, children, className }) => (
  <Link route={route} params={params} href={href} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
);

다른 구성 요소.js

<Link href="/">Login</Link>

className 가 Link의 소품으로 제공되지 않는 특별한 이유가 있습니까? 나는 그것을 추가하기 위해 PR을 만들고 싶지만 그것이 허용되지 않는 이유가 있을 것이라고 생각합니다.

답을 찾았습니다!
https://github.com/zeit/next.js/pull/1642#issuecomment -292431043

스타일 구성 요소로 링크 스타일을 변경하려는 사람들을 위해

const LinkItem = styled(Link)`
// your style
`;

다음과 같이 사용할 수 있습니다 <LinkItem to="/yourComponent">somthing</LinkItem>

이것을 알아내는 데 시간이 걸렸으므로 TLDR을 작성하겠습니다 👇

TLDR passHref 를 <Link> 태그에 추가하고 그 안에 원하는 스타일 구성 요소를 포함합니다.

실제 예
상위 구성요소에서:

<Link href="/login" passHref>
          <TopbarLink>Login</TopbarLink>
</Link>

TopbarLink를 정의하는 스타일이 지정된 구성 요소 파일에서:

export const TopbarLink = styled.a`
// your style
`;

@ferrucc-io 귀하의 예제는 앵커 내에서 앵커를 래핑합니다. 또한 일반적으로 링크를 배치해야 할 수도 있습니다. 이는 스타일이 지정된 내부 문제로 초기 문제를 가져옵니다.