Блог

Главная - Вопросы по программированию - Невозможно компонент Nextjs (ссылка) с использованием styled-components

Невозможно компонент Nextjs (ссылка) с использованием styled-components

#css #next.js #styled-components #server-side-rendering

Вопрос:

Я пытаюсь создать стилизованный Link компонент, предоставляемый с NextJS помощью Styled-Components . Я выполнил всю настройку, включая babel-plugin-styled-components создание _document.js /pages . Но все же я не могу создать компонент link.

Для настройки я следил за этой статьей: https://medium.com/nerd-for-tech/using-next-js-with-styled-components-easy-dfff3849e4f1

Это работает нормально

 const StyledComponent = Styled.a`
    color: red;
`

Но это не

 const StyledComponent = Styled(Link)`
    color: red;
`

Может кто-нибудь, пожалуйста, скажите мне, чего мне не хватает? Что теперь нужно сделать?

Любая помощь будет оценена.

Ответ №1:

The next.js Link не принимает никаких стилей, но вы можете стилизовать дочерние элементы, например a , и добавить passHref к Link ним при использовании a custom compoment . Стили дочернего элемента будут применены к родительскому, т.е. Link Однако вы можете стилизовать react-router-dom Link, NavLink , как то, что вы сделали выше. В next.js вы можете сделать это следующим образом

 import Link from 'next/link'

const CustomLink = styled.a `
    color: white;
    background: red;
`

<Link href="/" passHref>
    <CustomLink>Home</CustomLink>
</Link>
Метки: