es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • No se puede aplicar estilos a un componente de Nextjs (Link) utilizando styled-components.

No se puede aplicar estilos a un componente de Nextjs (Link) utilizando styled-components.

05 Jun, 2023 Programación

Estoy intentando aplicar estilo al componente Link proporcionado por NextJS utilizando Styled-Components. Ya he completado la configuración, incluyendo babel-plugin-styled-components y he creado _document.js en /pages, pero aún no puedo aplicar estilos al componente Link.

Para la configuración, he seguido este artículo: https://medium.com/nerd-for-tech/using-next-js-with-styled-components-easy-dfff3849e4f1

Esto funciona bien:

const StyledComponent = Styled.acolor: red;

Pero esto no funciona:

const StyledComponent = Styled(Link)color: red;

¿Alguien puede decirme qué me falta? ¿Qué debo hacer ahora?

Cualquier ayuda será apreciada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es posible que el componente Link proporcionado por NextJS no esté siendo reconocido por Styled-Components. Intente importar el componente Link desde NextJS y pasarla como un componente con estilo de esta manera:

    import Link from 'next/link';
import styled from 'styled-components';

const StyledLink = styled(Link)`
  color: red;
`;

<styledlink href="/">¡Mi enlace con estilo!</styledlink>

    Esto debería funcionar según lo esperado. Si no es así, verifique que haya instalado todas las dependencias necesarias y que la configuración del proyecto esté configurada correctamente. También puede intentar eliminar y luego reinstalar las dependencias para asegurarse de que todo esté instalado correctamente.

Comments are closed.